From b0cbb41aa387e417c92029086b2836303cc30652 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 11 Oct 2022 15:59:43 +0200 Subject: [PATCH 1/8] post build --- lib-esm/ActionList/Description.js | 4 +-- lib-esm/ActionList/Divider.js | 2 +- lib-esm/ActionList/LinkItem.js | 4 +-- lib-esm/ActionList/Visuals.js | 4 +-- lib-esm/ActionMenu.js | 4 +-- lib-esm/Autocomplete/AutocompleteMenu.js | 4 +-- lib-esm/Avatar.js | 3 +- lib-esm/AvatarPair.js | 3 +- lib-esm/AvatarStack.js | 3 +- lib-esm/Box.js | 3 +- lib-esm/BranchName.js | 3 +- lib-esm/Button/ButtonBase.js | 4 +-- lib-esm/Button/IconButton.js | 4 +-- lib-esm/Button/LinkButton.js | 4 +-- lib-esm/ButtonGroup.js | 3 +- lib-esm/Checkbox.js | 3 +- lib-esm/CounterLabel.js | 3 +- lib-esm/Details.js | 3 +- lib-esm/DropdownStyles.js | 4 +-- .../FilteredActionList/FilteredActionList.js | 4 +-- lib-esm/FilteredSearch.js | 3 +- lib-esm/Flash.js | 3 +- lib-esm/Heading.js | 3 +- lib-esm/Label.js | 3 +- lib-esm/LabelGroup.js | 3 +- lib-esm/Link.js | 3 +- lib-esm/Overlay.js | 3 +- lib-esm/PageLayout/PageLayout.js | 2 +- lib-esm/Pagehead.js | 3 +- lib-esm/Placeholder.js | 28 +++++++++++++++ lib-esm/Radio.js | 3 +- lib-esm/Spinner.js | 3 +- lib-esm/StyledOcticon.js | 3 +- lib-esm/Text.js | 3 +- lib-esm/TextInputWithTokens.js | 3 +- lib-esm/Textarea.js | 3 +- lib-esm/ThemeProvider.js | 8 ++--- lib-esm/ToggleSwitch.js | 7 ++-- lib-esm/Token/Token.js | 4 +-- lib-esm/TreeView/TreeView.js | 4 +-- lib-esm/Truncate.js | 3 +- lib-esm/UnderlineNav2/UnderlineNavItem.js | 4 +-- lib-esm/_InputCaption.js | 3 +- lib-esm/_InputLabel.js | 3 +- lib-esm/_InputValidation.js | 3 +- lib-esm/_TextInputInnerAction.js | 7 ++-- lib-esm/_TextInputInnerVisualSlot.js | 7 ++-- lib-esm/_TextInputWrapper.js | 3 +- lib-esm/_UnstyledTextInput.js | 3 +- lib-esm/_ValidationAnimationContainer.js | 4 +-- lib-esm/_VisuallyHidden.js | 3 +- lib-esm/_getGlobalFocusStyles.js | 4 +-- lib-esm/constants.js | 6 ++-- .../SelectMenu/SelectMenuLoadingAnimation.js | 4 +-- .../_AutocompleteSuggestions.js | 4 +-- lib-esm/drafts/MarkdownEditor/_Footer.js | 4 +-- .../drafts/MarkdownViewer/MarkdownViewer.js | 4 +-- lib-esm/index.js | 2 +- lib-esm/sx.js | 4 +-- lib-esm/utils/test-helpers.js | 13 +++++++ lib/ActionList/Description.js | 4 +-- lib/ActionList/Divider.js | 2 +- lib/ActionList/LinkItem.js | 4 +-- lib/ActionList/Visuals.js | 4 +-- lib/ActionMenu.js | 4 +-- lib/Avatar.js | 3 +- lib/AvatarPair.js | 3 +- lib/AvatarStack.js | 3 +- lib/Box.js | 3 +- lib/BranchName.js | 3 +- lib/Button/ButtonBase.js | 4 +-- lib/Button/IconButton.js | 4 +-- lib/Button/LinkButton.js | 4 +-- lib/ButtonGroup.js | 3 +- lib/Checkbox.js | 3 +- lib/CounterLabel.js | 3 +- lib/Details.js | 3 +- lib/DropdownStyles.js | 4 +-- lib/FilteredSearch.js | 3 +- lib/Flash.js | 3 +- lib/Heading.js | 3 +- lib/Label.js | 3 +- lib/LabelGroup.js | 3 +- lib/Link.js | 3 +- lib/Overlay.js | 3 +- lib/PageLayout/PageLayout.js | 2 +- lib/Pagehead.js | 3 +- lib/Placeholder.js | 36 +++++++++++++++++++ lib/Radio.js | 3 +- lib/Spinner.js | 3 +- lib/StyledOcticon.js | 3 +- lib/Text.js | 3 +- lib/TextInputWithTokens.js | 3 +- lib/Textarea.js | 3 +- lib/ThemeProvider.js | 4 +-- lib/ToggleSwitch.js | 3 +- lib/Token/Token.js | 4 +-- lib/Truncate.js | 3 +- lib/UnderlineNav2/UnderlineNavItem.js | 4 +-- lib/_InputCaption.js | 3 +- lib/_InputLabel.js | 3 +- lib/_InputValidation.js | 3 +- lib/_TextInputInnerAction.js | 7 ++-- lib/_TextInputInnerVisualSlot.js | 3 +- lib/_TextInputWrapper.js | 3 +- lib/_UnstyledTextInput.js | 3 +- lib/_ValidationAnimationContainer.js | 4 +-- lib/_VisuallyHidden.js | 3 +- lib/_getGlobalFocusStyles.js | 4 +-- lib/constants.js | 6 +++- lib/index.js | 2 +- lib/sx.js | 4 +-- lib/utils/test-helpers.js | 15 ++++++++ 113 files changed, 243 insertions(+), 231 deletions(-) create mode 100644 lib-esm/Placeholder.js create mode 100644 lib-esm/utils/test-helpers.js create mode 100644 lib/Placeholder.js create mode 100644 lib/utils/test-helpers.js diff --git a/lib-esm/ActionList/Description.js b/lib-esm/ActionList/Description.js index 8fd17dea8d1..2ec210d13b4 100644 --- a/lib-esm/ActionList/Description.js +++ b/lib-esm/ActionList/Description.js @@ -1,9 +1,9 @@ import React from 'react'; import Box from '../Box.js'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import Truncate from '../Truncate.js'; import { Slot } from './shared.js'; -import merge from 'deepmerge'; const Description = ({ variant = 'inline', diff --git a/lib-esm/ActionList/Divider.js b/lib-esm/ActionList/Divider.js index 194c3100275..48772baf70a 100644 --- a/lib-esm/ActionList/Divider.js +++ b/lib-esm/ActionList/Divider.js @@ -1,7 +1,7 @@ import React from 'react'; import Box from '../Box.js'; import { get } from '../constants.js'; -import '../sx.js'; +import '@styled-system/css'; import merge from 'deepmerge'; /** diff --git a/lib-esm/ActionList/LinkItem.js b/lib-esm/ActionList/LinkItem.js index 95472eb70ed..68490b1749e 100644 --- a/lib-esm/ActionList/LinkItem.js +++ b/lib-esm/ActionList/LinkItem.js @@ -1,8 +1,8 @@ import React from 'react'; import Link from '../Link.js'; -import '../sx.js'; -import { Item } from './Item.js'; +import '@styled-system/css'; import merge from 'deepmerge'; +import { Item } from './Item.js'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LinkItem = /*#__PURE__*/React.forwardRef(({ diff --git a/lib-esm/ActionList/Visuals.js b/lib-esm/ActionList/Visuals.js index b6e9041724b..27729c8a692 100644 --- a/lib-esm/ActionList/Visuals.js +++ b/lib-esm/ActionList/Visuals.js @@ -1,9 +1,9 @@ import React from 'react'; import Box from '../Box.js'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import { get } from '../constants.js'; import { Slot, getVariantStyles, TEXT_ROW_HEIGHT } from './shared.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LeadingVisualContainer = ({ diff --git a/lib-esm/ActionMenu.js b/lib-esm/ActionMenu.js index bb5a1154ddb..21e147c82df 100644 --- a/lib-esm/ActionMenu.js +++ b/lib-esm/ActionMenu.js @@ -4,12 +4,12 @@ import { TriangleDownIcon } from '@primer/octicons-react'; import { Divider } from './ActionList/Divider.js'; import { ActionListContainerContext } from './ActionList/ActionListContainerContext.js'; import { Button } from './Button/index.js'; -import './sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate.js'; import { useProvidedRefOrCreate } from './hooks/useProvidedRefOrCreate.js'; import { useMenuKeyboardNavigation } from './hooks/useMenuKeyboardNavigation.js'; import { AnchoredOverlay } from './AnchoredOverlay/AnchoredOverlay.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const MenuContext = /*#__PURE__*/React.createContext({ diff --git a/lib-esm/Autocomplete/AutocompleteMenu.js b/lib-esm/Autocomplete/AutocompleteMenu.js index fdff8f526cc..f153dfc748d 100644 --- a/lib-esm/Autocomplete/AutocompleteMenu.js +++ b/lib-esm/Autocomplete/AutocompleteMenu.js @@ -3,7 +3,7 @@ import { scrollIntoView } from '@primer/behaviors'; import { ActionList } from '../deprecated/ActionList/index.js'; import { useFocusZone } from '../hooks/useFocusZone.js'; import Box from '../Box.js'; -import Spinner from '../Spinner.js'; +import StyledSpinner from '../Spinner.js'; import { AutocompleteContext } from './AutocompleteContext.js'; import { PlusIcon } from '@primer/octicons-react'; import VisuallyHidden from '../_VisuallyHidden.js'; @@ -178,7 +178,7 @@ function AutocompleteMenu(props) { p: 3, display: "flex", justifyContent: "center" - }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", { + }, /*#__PURE__*/React.createElement(StyledSpinner, null)) : /*#__PURE__*/React.createElement("div", { ref: listContainerRef }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, { selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property diff --git a/lib-esm/Avatar.js b/lib-esm/Avatar.js index 8b0fd33da44..540f15867e1 100644 --- a/lib-esm/Avatar.js +++ b/lib-esm/Avatar.js @@ -25,6 +25,5 @@ Avatar.defaultProps = { alt: '', square: false }; -var Avatar$1 = Avatar; -export { Avatar$1 as default }; +export { Avatar as default }; diff --git a/lib-esm/AvatarPair.js b/lib-esm/AvatarPair.js index 234c16b1cf7..60954bf7aa3 100644 --- a/lib-esm/AvatarPair.js +++ b/lib-esm/AvatarPair.js @@ -33,6 +33,5 @@ const AvatarPair = ({ AvatarPair.displayName = "AvatarPair"; // styled() changes this AvatarPair.displayName = 'AvatarPair'; -var AvatarPair$1 = AvatarPair; -export { AvatarPair$1 as default }; +export { AvatarPair as default }; diff --git a/lib-esm/AvatarStack.js b/lib-esm/AvatarStack.js index 76aa06987f3..348e8e189c6 100644 --- a/lib-esm/AvatarStack.js +++ b/lib-esm/AvatarStack.js @@ -43,6 +43,5 @@ const AvatarStack = ({ }; AvatarStack.displayName = "AvatarStack"; -var AvatarStack$1 = AvatarStack; -export { AvatarStack$1 as default }; +export { AvatarStack as default }; diff --git a/lib-esm/Box.js b/lib-esm/Box.js index 9cc0bbf8dae..eec0c66e992 100644 --- a/lib-esm/Box.js +++ b/lib-esm/Box.js @@ -6,6 +6,5 @@ const Box = styled.div.withConfig({ displayName: "Box", componentId: "sc-1gh2r6s-0" })(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx); -var Box$1 = Box; -export { Box$1 as default }; +export { Box as default }; diff --git a/lib-esm/BranchName.js b/lib-esm/BranchName.js index 90f519d37d1..aa99423ca7c 100644 --- a/lib-esm/BranchName.js +++ b/lib-esm/BranchName.js @@ -6,6 +6,5 @@ const BranchName = styled.a.withConfig({ displayName: "BranchName", componentId: "sc-lduqme-0" })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";text-decoration:none;", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.accent.fg'), get('colors.accent.subtle'), get('radii.2'), sx); -var BranchName$1 = BranchName; -export { BranchName$1 as default }; +export { BranchName as default }; diff --git a/lib-esm/Button/ButtonBase.js b/lib-esm/Button/ButtonBase.js index ec4cc279d01..dd0a55482fa 100644 --- a/lib-esm/Button/ButtonBase.js +++ b/lib-esm/Button/ButtonBase.js @@ -1,10 +1,10 @@ import React, { forwardRef, useMemo } from 'react'; import Box from '../Box.js'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import { useTheme } from '../ThemeProvider.js'; import { StyledButton } from './types.js'; import { getButtonStyles, getSizeStyles, getVariantStyles } from './styles.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const defaultSxProp = {}; diff --git a/lib-esm/Button/IconButton.js b/lib-esm/Button/IconButton.js index 82dd3a9e8b9..57568bd3d51 100644 --- a/lib-esm/Button/IconButton.js +++ b/lib-esm/Button/IconButton.js @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import { useTheme } from '../ThemeProvider.js'; import Box from '../Box.js'; import { StyledButton } from './types.js'; import { getBaseStyles, getSizeStyles, getVariantStyles } from './styles.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => { diff --git a/lib-esm/Button/LinkButton.js b/lib-esm/Button/LinkButton.js index 8a1d803e770..98c58f03d39 100644 --- a/lib-esm/Button/LinkButton.js +++ b/lib-esm/Button/LinkButton.js @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; -import '../sx.js'; -import { ButtonBase } from './ButtonBase.js'; +import '@styled-system/css'; import merge from 'deepmerge'; +import { ButtonBase } from './ButtonBase.js'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LinkButton = /*#__PURE__*/forwardRef(({ diff --git a/lib-esm/ButtonGroup.js b/lib-esm/ButtonGroup.js index 1eee76ce97a..76c8b2e9a5a 100644 --- a/lib-esm/ButtonGroup.js +++ b/lib-esm/ButtonGroup.js @@ -6,6 +6,5 @@ const ButtonGroup = styled.div.withConfig({ displayName: "ButtonGroup", componentId: "sc-tk435v-0" })(["display:inline-flex;vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx); -var ButtonGroup$1 = ButtonGroup; -export { ButtonGroup$1 as default }; +export { ButtonGroup as default }; diff --git a/lib-esm/Checkbox.js b/lib-esm/Checkbox.js index dc2049624cb..41b80cff176 100644 --- a/lib-esm/Checkbox.js +++ b/lib-esm/Checkbox.js @@ -56,6 +56,5 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({ }, rest)); }); Checkbox.displayName = 'Checkbox'; -var Checkbox$1 = Checkbox; -export { Checkbox$1 as default }; +export { Checkbox as default }; diff --git a/lib-esm/CounterLabel.js b/lib-esm/CounterLabel.js index d484c5102e4..476d988c287 100644 --- a/lib-esm/CounterLabel.js +++ b/lib-esm/CounterLabel.js @@ -24,6 +24,5 @@ const CounterLabel = styled.span.withConfig({ displayName: "CounterLabel", componentId: "sc-13ceqbg-0" })(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx); -var CounterLabel$1 = CounterLabel; -export { CounterLabel$1 as default }; +export { CounterLabel as default }; diff --git a/lib-esm/Details.js b/lib-esm/Details.js index f37561e42ad..9951fea585e 100644 --- a/lib-esm/Details.js +++ b/lib-esm/Details.js @@ -6,6 +6,5 @@ const Details = styled.details.withConfig({ componentId: "sc-1qhvasm-0" })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx); Details.displayName = 'Details'; -var Details$1 = Details; -export { Details$1 as default }; +export { Details as default }; diff --git a/lib-esm/DropdownStyles.js b/lib-esm/DropdownStyles.js index 44af246264c..a3bcd6a1496 100644 --- a/lib-esm/DropdownStyles.js +++ b/lib-esm/DropdownStyles.js @@ -124,6 +124,4 @@ const getDirectionStyles = (theme, direction) => { return map[direction]; }; -var getDirectionStyles$1 = getDirectionStyles; - -export { getDirectionStyles$1 as default }; +export { getDirectionStyles as default }; diff --git a/lib-esm/FilteredActionList/FilteredActionList.js b/lib-esm/FilteredActionList/FilteredActionList.js index 9f3e2542973..84be75f838f 100644 --- a/lib-esm/FilteredActionList/FilteredActionList.js +++ b/lib-esm/FilteredActionList/FilteredActionList.js @@ -3,7 +3,7 @@ import { useSSRSafeId } from '@react-aria/ssr'; import TextInput from '../TextInput.js'; import Box from '../Box.js'; import { ActionList } from '../deprecated/ActionList/index.js'; -import Spinner from '../Spinner.js'; +import StyledSpinner from '../Spinner.js'; import { useFocusZone } from '../hooks/useFocusZone.js'; import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js'; import styled from 'styled-components'; @@ -103,7 +103,7 @@ function FilteredActionList({ justifyContent: "center", pt: 6, pb: 7 - }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(ActionList, _extends({ + }, /*#__PURE__*/React.createElement(StyledSpinner, null)) : /*#__PURE__*/React.createElement(ActionList, _extends({ ref: listContainerRef, items: items }, listProps, { diff --git a/lib-esm/FilteredSearch.js b/lib-esm/FilteredSearch.js index 5a7aa4330fd..73e6ad6fab9 100644 --- a/lib-esm/FilteredSearch.js +++ b/lib-esm/FilteredSearch.js @@ -6,6 +6,5 @@ const FilteredSearch = styled.div.withConfig({ displayName: "FilteredSearch", componentId: "sc-1q2r5fr-0" })(["display:flex;align-items:stretch;summary,> button{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}", ""], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx); -var FilteredSearch$1 = FilteredSearch; -export { FilteredSearch$1 as default }; +export { FilteredSearch as default }; diff --git a/lib-esm/Flash.js b/lib-esm/Flash.js index 38a18c54a84..78038da8d8c 100644 --- a/lib-esm/Flash.js +++ b/lib-esm/Flash.js @@ -46,6 +46,5 @@ const Flash = styled.div.withConfig({ Flash.defaultProps = { variant: 'default' }; -var Flash$1 = Flash; -export { Flash$1 as default }; +export { Flash as default }; diff --git a/lib-esm/Heading.js b/lib-esm/Heading.js index c51029260d1..d344653be70 100644 --- a/lib-esm/Heading.js +++ b/lib-esm/Heading.js @@ -6,6 +6,5 @@ const Heading = styled.h2.withConfig({ displayName: "Heading", componentId: "sc-1irtotl-0" })(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx); -var Heading$1 = Heading; -export { Heading$1 as default }; +export { Heading as default }; diff --git a/lib-esm/Label.js b/lib-esm/Label.js index 5c8eb09e3e1..3f63b8b5b24 100644 --- a/lib-esm/Label.js +++ b/lib-esm/Label.js @@ -68,6 +68,5 @@ Label.defaultProps = { size: 'small', variant: 'default' }; -var Label$1 = Label; -export { Label$1 as default, variants }; +export { Label as default, variants }; diff --git a/lib-esm/LabelGroup.js b/lib-esm/LabelGroup.js index 6855c6c994d..ee9fb8e0714 100644 --- a/lib-esm/LabelGroup.js +++ b/lib-esm/LabelGroup.js @@ -6,6 +6,5 @@ const LabelGroup = styled.span.withConfig({ displayName: "LabelGroup", componentId: "sc-1a0k7wh-0" })(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], get('space.1'), sx); -var LabelGroup$1 = LabelGroup; -export { LabelGroup$1 as default }; +export { LabelGroup as default }; diff --git a/lib-esm/Link.js b/lib-esm/Link.js index d01907640fb..7c6a58a82c3 100644 --- a/lib-esm/Link.js +++ b/lib-esm/Link.js @@ -13,6 +13,5 @@ const Link = styled.a.withConfig({ displayName: "Link", componentId: "sc-hrxz1n-0" })(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', sx); -var Link$1 = Link; -export { Link$1 as default }; +export { Link as default }; diff --git a/lib-esm/Overlay.js b/lib-esm/Overlay.js index ad6d768c9a9..6c517f84c91 100644 --- a/lib-esm/Overlay.js +++ b/lib-esm/Overlay.js @@ -157,6 +157,5 @@ Overlay.defaultProps = { height: 'auto', width: 'auto' }; -var Overlay$1 = Overlay; -export { Overlay$1 as default }; +export { Overlay as default }; diff --git a/lib-esm/PageLayout/PageLayout.js b/lib-esm/PageLayout/PageLayout.js index b2b7b72d4bd..b5f156f56bd 100644 --- a/lib-esm/PageLayout/PageLayout.js +++ b/lib-esm/PageLayout/PageLayout.js @@ -2,7 +2,7 @@ import React from 'react'; import { useStickyPaneHeight } from './useStickyPaneHeight.js'; import Box from '../Box.js'; import { isResponsiveValue, useResponsiveValue } from '../hooks/useResponsiveValue.js'; -import '../sx.js'; +import '@styled-system/css'; import merge from 'deepmerge'; const REGION_ORDER = { diff --git a/lib-esm/Pagehead.js b/lib-esm/Pagehead.js index 02b1e4575ad..19f6de9a9ad 100644 --- a/lib-esm/Pagehead.js +++ b/lib-esm/Pagehead.js @@ -6,6 +6,5 @@ const Pagehead = styled.div.withConfig({ displayName: "Pagehead", componentId: "sc-17d52hr-0" })(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.default'), sx); -var Pagehead$1 = Pagehead; -export { Pagehead$1 as default }; +export { Pagehead as default }; diff --git a/lib-esm/Placeholder.js b/lib-esm/Placeholder.js new file mode 100644 index 00000000000..84fe16c3f42 --- /dev/null +++ b/lib-esm/Placeholder.js @@ -0,0 +1,28 @@ +import React from 'react'; +import Box from './Box.js'; + +/** Private component used to render placeholders in storybook and documentation examples */ + +const Placeholder = ({ + width, + height, + id, + label +}) => { + return /*#__PURE__*/React.createElement(Box, { + id: id, + sx: { + width: width !== null && width !== void 0 ? width : '100%', + height, + display: 'grid', + placeItems: 'center', + bg: 'canvas.inset', + borderRadius: 2, + border: '1px solid', + borderColor: 'border.subtle' + } + }, label); +}; +Placeholder.displayName = "Placeholder"; + +export { Placeholder }; diff --git a/lib-esm/Radio.js b/lib-esm/Radio.js index e7e74b1a3ea..c224772076f 100644 --- a/lib-esm/Radio.js +++ b/lib-esm/Radio.js @@ -55,6 +55,5 @@ const Radio = /*#__PURE__*/React.forwardRef(({ }, rest)); }); Radio.displayName = 'Radio'; -var Radio$1 = Radio; -export { Radio$1 as default }; +export { Radio as default }; diff --git a/lib-esm/Spinner.js b/lib-esm/Spinner.js index 3875a69b759..822ddee8089 100644 --- a/lib-esm/Spinner.js +++ b/lib-esm/Spinner.js @@ -42,6 +42,5 @@ const StyledSpinner = styled(Spinner).withConfig({ componentId: "sc-1dxfx1i-0" })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx); StyledSpinner.displayName = 'Spinner'; -var Spinner$1 = StyledSpinner; -export { Spinner$1 as default }; +export { StyledSpinner as default }; diff --git a/lib-esm/StyledOcticon.js b/lib-esm/StyledOcticon.js index 23d0ae198d4..8cbde0d81af 100644 --- a/lib-esm/StyledOcticon.js +++ b/lib-esm/StyledOcticon.js @@ -25,6 +25,5 @@ const StyledOcticon = styled(Octicon).withConfig({ StyledOcticon.defaultProps = { size: 16 }; -var StyledOcticon$1 = StyledOcticon; -export { StyledOcticon$1 as default }; +export { StyledOcticon as default }; diff --git a/lib-esm/Text.js b/lib-esm/Text.js index bf65c7897ce..f2b0ea81ff0 100644 --- a/lib-esm/Text.js +++ b/lib-esm/Text.js @@ -6,6 +6,5 @@ const Text = styled.span.withConfig({ displayName: "Text", componentId: "sc-125xb1i-0" })(["", ";", ";", ";"], TYPOGRAPHY, COMMON, sx); -var Text$1 = Text; -export { Text$1 as default }; +export { Text as default }; diff --git a/lib-esm/TextInputWithTokens.js b/lib-esm/TextInputWithTokens.js index 49212e9ef03..ca28d2891c9 100644 --- a/lib-esm/TextInputWithTokens.js +++ b/lib-esm/TextInputWithTokens.js @@ -320,6 +320,5 @@ TextInputWithTokens.defaultProps = { loaderPosition: 'auto' }; TextInputWithTokens.displayName = 'TextInputWithTokens'; -var TextInputWithTokens$1 = TextInputWithTokens; -export { TextInputWithTokens$1 as default }; +export { TextInputWithTokens as default }; diff --git a/lib-esm/Textarea.js b/lib-esm/Textarea.js index cdbacdb582d..126fd11f8e2 100644 --- a/lib-esm/Textarea.js +++ b/lib-esm/Textarea.js @@ -46,6 +46,5 @@ const Textarea = /*#__PURE__*/React.forwardRef(({ }, rest))); }); Textarea.displayName = 'Textarea'; -var Textarea$1 = Textarea; -export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea$1 as default }; +export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea as default }; diff --git a/lib-esm/ThemeProvider.js b/lib-esm/ThemeProvider.js index d255b2d807b..549bb889d2a 100644 --- a/lib-esm/ThemeProvider.js +++ b/lib-esm/ThemeProvider.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider as ThemeProvider$2 } from 'styled-components'; +import { ThemeProvider as ThemeProvider$1 } from 'styled-components'; import theme from './theme-preval.js'; import merge from 'deepmerge'; @@ -101,7 +101,7 @@ const ThemeProvider = ({ setDayScheme, setNightScheme } - }, /*#__PURE__*/React.createElement(ThemeProvider$2, { + }, /*#__PURE__*/React.createElement(ThemeProvider$1, { theme: resolvedTheme }, children, props.preventSSRMismatch ? /*#__PURE__*/React.createElement("script", { type: "application/json", @@ -217,6 +217,4 @@ function applyColorScheme(theme, colorScheme) { }; } -var ThemeProvider$1 = ThemeProvider; - -export { ThemeProvider, ThemeProvider$1 as default, useColorSchemeVar, useTheme }; +export { ThemeProvider, ThemeProvider as default, useColorSchemeVar, useTheme }; diff --git a/lib-esm/ToggleSwitch.js b/lib-esm/ToggleSwitch.js index 07b921297cc..4ce25ec1f04 100644 --- a/lib-esm/ToggleSwitch.js +++ b/lib-esm/ToggleSwitch.js @@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react'; import styled, { css } from 'styled-components'; import { variant } from 'styled-system'; import Box from './Box.js'; -import Spinner from './Spinner.js'; +import StyledSpinner from './Spinner.js'; import Text from './Text.js'; import { get } from './constants.js'; import sx from './sx.js'; @@ -114,7 +114,7 @@ const Switch = ({ alignItems: "center", flexDirection: statusLabelPosition === 'start' ? 'row' : 'row-reverse', sx: sxProp - }, loading ? /*#__PURE__*/React.createElement(Spinner, { + }, loading ? /*#__PURE__*/React.createElement(StyledSpinner, { size: "small" }) : null, /*#__PURE__*/React.createElement(Text, { color: acceptsInteraction ? 'fg.default' : 'fg.muted', @@ -186,6 +186,5 @@ Switch.defaultProps = { statusLabelPosition: 'start', size: 'medium' }; -var Switch$1 = Switch; -export { Switch$1 as default }; +export { Switch as default }; diff --git a/lib-esm/Token/Token.js b/lib-esm/Token/Token.js index 6cdd34c2e37..d7aaaba6e30 100644 --- a/lib-esm/Token/Token.js +++ b/lib-esm/Token/Token.js @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react'; import Box from '../Box.js'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import TokenBase, { isTokenInteractive, defaultTokenSize } from './TokenBase.js'; import RemoveTokenButton from './_RemoveTokenButton.js'; import TokenTextContainer from './_TokenTextContainer.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const tokenBorderWidthPx = 1; diff --git a/lib-esm/TreeView/TreeView.js b/lib-esm/TreeView/TreeView.js index eaa3a897066..42b1ba42e0b 100644 --- a/lib-esm/TreeView/TreeView.js +++ b/lib-esm/TreeView/TreeView.js @@ -4,7 +4,7 @@ import React from 'react'; import styled from 'styled-components'; import Box from '../Box.js'; import { useControllableState } from '../hooks/useControllableState.js'; -import Spinner from '../Spinner.js'; +import StyledSpinner from '../Spinner.js'; import StyledOcticon from '../StyledOcticon.js'; import sx from '../sx.js'; import Text from '../Text.js'; @@ -332,7 +332,7 @@ const LoadingItem = () => { return ( /*#__PURE__*/ // TODO: What aria attributes do we need to add here? - React.createElement(Item, null, /*#__PURE__*/React.createElement(LeadingVisual, null, /*#__PURE__*/React.createElement(Spinner, { + React.createElement(Item, null, /*#__PURE__*/React.createElement(LeadingVisual, null, /*#__PURE__*/React.createElement(StyledSpinner, { size: "small" })), /*#__PURE__*/React.createElement(Text, { sx: { diff --git a/lib-esm/Truncate.js b/lib-esm/Truncate.js index b47ffe4ddcc..1fb64fead5b 100644 --- a/lib-esm/Truncate.js +++ b/lib-esm/Truncate.js @@ -11,6 +11,5 @@ Truncate.defaultProps = { inline: false, maxWidth: 125 }; -var Truncate$1 = Truncate; -export { Truncate$1 as default }; +export { Truncate as default }; diff --git a/lib-esm/UnderlineNav2/UnderlineNavItem.js b/lib-esm/UnderlineNav2/UnderlineNavItem.js index e3f7b129374..9e272a5e5eb 100644 --- a/lib-esm/UnderlineNav2/UnderlineNavItem.js +++ b/lib-esm/UnderlineNav2/UnderlineNavItem.js @@ -1,11 +1,11 @@ import React, { forwardRef, useRef, useContext, useLayoutEffect } from 'react'; import Box from '../Box.js'; -import '../sx.js'; +import '@styled-system/css'; +import merge from 'deepmerge'; import { UnderlineNavContext } from './UnderlineNavContext.js'; import CounterLabel from '../CounterLabel.js'; import { getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles } from './styles.js'; import { LoadingCounter } from './LoadingCounter.js'; -import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } diff --git a/lib-esm/_InputCaption.js b/lib-esm/_InputCaption.js index f0475ea6f73..0f0fb78eb59 100644 --- a/lib-esm/_InputCaption.js +++ b/lib-esm/_InputCaption.js @@ -15,6 +15,5 @@ const InputCaption = ({ }, children); InputCaption.displayName = "InputCaption"; -var InputCaption$1 = InputCaption; -export { InputCaption$1 as default }; +export { InputCaption as default }; diff --git a/lib-esm/_InputLabel.js b/lib-esm/_InputLabel.js index 9670062e20a..e7815031170 100644 --- a/lib-esm/_InputLabel.js +++ b/lib-esm/_InputLabel.js @@ -39,6 +39,5 @@ const InputLabel = ({ }; InputLabel.displayName = "InputLabel"; -var InputLabel$1 = InputLabel; -export { InputLabel$1 as default }; +export { InputLabel as default }; diff --git a/lib-esm/_InputValidation.js b/lib-esm/_InputValidation.js index b79c5a1c9b7..d6a8390d99a 100644 --- a/lib-esm/_InputValidation.js +++ b/lib-esm/_InputValidation.js @@ -51,6 +51,5 @@ const InputValidation = ({ }; InputValidation.displayName = "InputValidation"; -var InputValidation$1 = InputValidation; -export { InputValidation$1 as default }; +export { InputValidation as default }; diff --git a/lib-esm/_TextInputInnerAction.js b/lib-esm/_TextInputInnerAction.js index 6dacd604b69..fb120513224 100644 --- a/lib-esm/_TextInputInnerAction.js +++ b/lib-esm/_TextInputInnerAction.js @@ -2,9 +2,9 @@ import React, { forwardRef } from 'react'; import Box from './Box.js'; import { Button } from './Button/index.js'; import Tooltip from './Tooltip.js'; -import './sx.js'; -import { IconButton } from './Button/IconButton.js'; +import '@styled-system/css'; import merge from 'deepmerge'; +import { IconButton } from './Button/IconButton.js'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const invisibleButtonStyleOverrides = { @@ -83,6 +83,5 @@ const TextInputAction = /*#__PURE__*/forwardRef(({ TextInputAction.defaultProps = { variant: 'invisible' }; -var TextInputAction$1 = TextInputAction; -export { TextInputAction$1 as default }; +export { TextInputAction as default }; diff --git a/lib-esm/_TextInputInnerVisualSlot.js b/lib-esm/_TextInputInnerVisualSlot.js index ddad084d8d8..c0528b17632 100644 --- a/lib-esm/_TextInputInnerVisualSlot.js +++ b/lib-esm/_TextInputInnerVisualSlot.js @@ -1,6 +1,6 @@ import React from 'react'; import Box from './Box.js'; -import Spinner from './Spinner.js'; +import StyledSpinner from './Spinner.js'; const TextInputInnerVisualSlot = ({ children, @@ -27,7 +27,7 @@ const TextInputInnerVisualSlot = ({ sx: { visibility: showLoadingIndicator ? 'hidden' : 'visible' } - }, children), /*#__PURE__*/React.createElement(Spinner, { + }, children), /*#__PURE__*/React.createElement(StyledSpinner, { sx: children ? { position: 'absolute', top: 0, @@ -47,6 +47,5 @@ const TextInputInnerVisualSlot = ({ }; TextInputInnerVisualSlot.displayName = "TextInputInnerVisualSlot"; -var TextInputInnerVisualSlot$1 = TextInputInnerVisualSlot; -export { TextInputInnerVisualSlot$1 as default }; +export { TextInputInnerVisualSlot as default }; diff --git a/lib-esm/_TextInputWrapper.js b/lib-esm/_TextInputWrapper.js index 59cea629bc2..461fa077d02 100644 --- a/lib-esm/_TextInputWrapper.js +++ b/lib-esm/_TextInputWrapper.js @@ -55,6 +55,5 @@ const TextInputWrapper = styled(TextInputBaseWrapper).withConfig({ displayName: "_TextInputWrapper__TextInputWrapper", componentId: "sc-apywy2-1" })(["background-repeat:no-repeat;background-position:right 8px center;& >:not(:last-child){margin-right:", ";}.TextInput-icon,.TextInput-action{align-self:center;color:", ";flex-shrink:0;}", " ", " ", ";"], get('space.2'), get('colors.fg.muted'), props => css(["padding-left:", ";padding-right:", ";> input,> select{padding-left:", ";padding-right:", ";}"], props.hasLeadingVisual ? textInputHorizPadding : 0, props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0, !props.hasLeadingVisual ? textInputHorizPadding : 0, !props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0), props => props.validationStatus === 'warning' && css(["border-color:", ";", ""], get('colors.attention.emphasis'), renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))), sx); -var TextInputWrapper$1 = TextInputWrapper; -export { TextInputBaseWrapper, TextInputWrapper$1 as default, textInputHorizPadding }; +export { TextInputBaseWrapper, TextInputWrapper as default, textInputHorizPadding }; diff --git a/lib-esm/_UnstyledTextInput.js b/lib-esm/_UnstyledTextInput.js index bd0d822413e..8f62224f136 100644 --- a/lib-esm/_UnstyledTextInput.js +++ b/lib-esm/_UnstyledTextInput.js @@ -5,6 +5,5 @@ const UnstyledTextInput = styled.input.withConfig({ displayName: "_UnstyledTextInput__UnstyledTextInput", componentId: "sc-31b2um-0" })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx); -var UnstyledTextInput$1 = UnstyledTextInput; -export { UnstyledTextInput$1 as default }; +export { UnstyledTextInput as default }; diff --git a/lib-esm/_ValidationAnimationContainer.js b/lib-esm/_ValidationAnimationContainer.js index a34818e15f1..9852d83a2df 100644 --- a/lib-esm/_ValidationAnimationContainer.js +++ b/lib-esm/_ValidationAnimationContainer.js @@ -31,6 +31,4 @@ const ValidationAnimationContainer = ({ }, children)) : null; }; -var ValidationAnimationContainer$1 = ValidationAnimationContainer; - -export { ValidationAnimationContainer$1 as default }; +export { ValidationAnimationContainer as default }; diff --git a/lib-esm/_VisuallyHidden.js b/lib-esm/_VisuallyHidden.js index 4b9dad3a002..80aa309dcf6 100644 --- a/lib-esm/_VisuallyHidden.js +++ b/lib-esm/_VisuallyHidden.js @@ -24,6 +24,5 @@ const VisuallyHidden = styled.span.withConfig({ VisuallyHidden.defaultProps = { isVisible: false }; -var VisuallyHidden$1 = VisuallyHidden; -export { VisuallyHidden$1 as default }; +export { VisuallyHidden as default }; diff --git a/lib-esm/_getGlobalFocusStyles.js b/lib-esm/_getGlobalFocusStyles.js index e3e9765cf6f..d66f7897856 100644 --- a/lib-esm/_getGlobalFocusStyles.js +++ b/lib-esm/_getGlobalFocusStyles.js @@ -5,6 +5,4 @@ const globalFocusStyle = css(["box-shadow:none;outline:2px solid ", ";"], get('c const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset); -var getGlobalFocusStyles$1 = getGlobalFocusStyles; - -export { getGlobalFocusStyles$1 as default }; +export { getGlobalFocusStyles as default }; diff --git a/lib-esm/constants.js b/lib-esm/constants.js index d87c1ad8381..1c7ce314d16 100644 --- a/lib-esm/constants.js +++ b/lib-esm/constants.js @@ -19,6 +19,8 @@ const whiteSpace = system({ }); const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace); // Border props -compose(styledSystem.border, styledSystem.shadow); +const BORDER = compose(styledSystem.border, styledSystem.shadow); +// Layout props +const LAYOUT = styledSystem.layout; -export { COMMON, TYPOGRAPHY, get }; +export { BORDER, COMMON, LAYOUT, TYPOGRAPHY, get }; diff --git a/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js b/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js index 4e6b4d22445..314b8966e04 100644 --- a/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js +++ b/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { get } from '../../constants.js'; -import Spinner from '../../Spinner.js'; +import StyledSpinner from '../../Spinner.js'; import sx from '../../sx.js'; const Animation = styled.div.withConfig({ @@ -10,7 +10,7 @@ const Animation = styled.div.withConfig({ })(["padding:", " ", ";text-align:center;background-color:", ";", ""], get('space.6'), get('space.4'), get('colors.canvas.overlay'), sx); const SelectMenuLoadingAnimation = props => { - return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(Spinner, null)); + return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(StyledSpinner, null)); }; SelectMenuLoadingAnimation.displayName = "SelectMenuLoadingAnimation"; diff --git a/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js b/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js index 4f0486a87da..94e66a01c0b 100644 --- a/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js +++ b/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js @@ -1,5 +1,5 @@ import React, { useState, useCallback } from 'react'; -import Spinner from '../../Spinner.js'; +import StyledSpinner from '../../Spinner.js'; import { ActionList } from '../../ActionList/index.js'; import Box from '../../Box.js'; import { useCombobox } from '../hooks/useCombobox.js'; @@ -12,7 +12,7 @@ const LoadingIndicator = () => /*#__PURE__*/React.createElement(Box, { justifyContent: 'center', py: 2 } -}, /*#__PURE__*/React.createElement(Spinner, { +}, /*#__PURE__*/React.createElement(StyledSpinner, { size: "small" })); diff --git a/lib-esm/drafts/MarkdownEditor/_Footer.js b/lib-esm/drafts/MarkdownEditor/_Footer.js index 7554085c0cc..a5f12a58983 100644 --- a/lib-esm/drafts/MarkdownEditor/_Footer.js +++ b/lib-esm/drafts/MarkdownEditor/_Footer.js @@ -3,7 +3,7 @@ import { AlertIcon, MarkdownIcon, ImageIcon } from '@primer/octicons-react'; import { MarkdownEditorContext } from './_MarkdownEditorContext.js'; import Box from '../../Box.js'; import Text from '../../Text.js'; -import Spinner from '../../Spinner.js'; +import StyledSpinner from '../../Spinner.js'; import { Button } from '../../Button/index.js'; import { LinkButton } from '../../Button/LinkButton.js'; @@ -39,7 +39,7 @@ const Footer = ({ py: 1, px: 2 } -}, /*#__PURE__*/React.createElement(Spinner, { +}, /*#__PURE__*/React.createElement(StyledSpinner, { size: "small", sx: { mr: 1, diff --git a/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js b/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js index 8f4910d54b9..02b6b0429fc 100644 --- a/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js +++ b/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'; import { useLinkInterception } from './_useLinkInterception.js'; import { useListInteraction } from './_useListInteraction.js'; import Box from '../../Box.js'; -import Spinner from '../../Spinner.js'; +import StyledSpinner from '../../Spinner.js'; const createRenderedContainer = html => { const div = document.createElement('div'); @@ -56,7 +56,7 @@ const MarkdownViewer = ({ justifyContent: 'space-around', p: 2 } - }, /*#__PURE__*/React.createElement(Spinner, { + }, /*#__PURE__*/React.createElement(StyledSpinner, { "aria-label": "Loading content..." })) : /*#__PURE__*/React.createElement(Box, { ref: outputContainerRef, diff --git a/lib-esm/index.js b/lib-esm/index.js index 3c9208d359a..c6490121a6f 100644 --- a/lib-esm/index.js +++ b/lib-esm/index.js @@ -1,7 +1,7 @@ export { default as theme } from './theme-preval.js'; export { get as themeGet } from './constants.js'; export { default as BaseStyles } from './BaseStyles.js'; -export { default as ThemeProvider, useColorSchemeVar, useTheme } from './ThemeProvider.js'; +export { ThemeProvider, useColorSchemeVar, useTheme } from './ThemeProvider.js'; export { default as Box } from './Box.js'; export { Button } from './Button/index.js'; export { default as useDetails } from './hooks/useDetails.js'; diff --git a/lib-esm/sx.js b/lib-esm/sx.js index 1f076a30ce5..e0edb00ca51 100644 --- a/lib-esm/sx.js +++ b/lib-esm/sx.js @@ -3,6 +3,4 @@ export { default as merge } from 'deepmerge'; const sx = props => css(props.sx); -var sx$1 = sx; - -export { sx$1 as default }; +export { sx as default }; diff --git a/lib-esm/utils/test-helpers.js b/lib-esm/utils/test-helpers.js new file mode 100644 index 00000000000..5ec1e3cb75f --- /dev/null +++ b/lib-esm/utils/test-helpers.js @@ -0,0 +1,13 @@ +// JSDOM doesn't mock ResizeObserver +global.ResizeObserver = jest.fn().mockImplementation(() => { + return { + observe: jest.fn(), + disconnect: jest.fn() + }; +}); +global.CSS = { + escape: jest.fn(), + supports: jest.fn().mockImplementation(() => { + return false; + }) +}; diff --git a/lib/ActionList/Description.js b/lib/ActionList/Description.js index c9fda0e416a..657dc0d39bc 100644 --- a/lib/ActionList/Description.js +++ b/lib/ActionList/Description.js @@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var Truncate = require('../Truncate.js'); var shared = require('./shared.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/Divider.js b/lib/ActionList/Divider.js index 3e59334c707..d51551f15ae 100644 --- a/lib/ActionList/Divider.js +++ b/lib/ActionList/Divider.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); var constants = require('../constants.js'); -require('../sx.js'); +require('@styled-system/css'); var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/LinkItem.js b/lib/ActionList/LinkItem.js index e4b2ba96f61..42e4865d0ac 100644 --- a/lib/ActionList/LinkItem.js +++ b/lib/ActionList/LinkItem.js @@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Link = require('../Link.js'); -require('../sx.js'); -var Item = require('./Item.js'); +require('@styled-system/css'); var merge = require('deepmerge'); +var Item = require('./Item.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/Visuals.js b/lib/ActionList/Visuals.js index 4ecbf9ef8be..4675f3f4649 100644 --- a/lib/ActionList/Visuals.js +++ b/lib/ActionList/Visuals.js @@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var constants = require('../constants.js'); var shared = require('./shared.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionMenu.js b/lib/ActionMenu.js index c4770f152a4..103275383d8 100644 --- a/lib/ActionMenu.js +++ b/lib/ActionMenu.js @@ -8,12 +8,12 @@ var octiconsReact = require('@primer/octicons-react'); var Divider = require('./ActionList/Divider.js'); var ActionListContainerContext = require('./ActionList/ActionListContainerContext.js'); var index = require('./Button/index.js'); -require('./sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var useProvidedStateOrCreate = require('./hooks/useProvidedStateOrCreate.js'); var useProvidedRefOrCreate = require('./hooks/useProvidedRefOrCreate.js'); var useMenuKeyboardNavigation = require('./hooks/useMenuKeyboardNavigation.js'); var AnchoredOverlay = require('./AnchoredOverlay/AnchoredOverlay.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Avatar.js b/lib/Avatar.js index 353a6e4e443..f12043343c7 100644 --- a/lib/Avatar.js +++ b/lib/Avatar.js @@ -31,6 +31,5 @@ Avatar.defaultProps = { alt: '', square: false }; -var Avatar$1 = Avatar; -module.exports = Avatar$1; +module.exports = Avatar; diff --git a/lib/AvatarPair.js b/lib/AvatarPair.js index 1d73f86d90e..ef6e5802f63 100644 --- a/lib/AvatarPair.js +++ b/lib/AvatarPair.js @@ -40,6 +40,5 @@ const AvatarPair = ({ AvatarPair.displayName = "AvatarPair"; // styled() changes this AvatarPair.displayName = 'AvatarPair'; -var AvatarPair$1 = AvatarPair; -module.exports = AvatarPair$1; +module.exports = AvatarPair; diff --git a/lib/AvatarStack.js b/lib/AvatarStack.js index e6dba67f675..cdb7e8319ba 100644 --- a/lib/AvatarStack.js +++ b/lib/AvatarStack.js @@ -51,6 +51,5 @@ const AvatarStack = ({ }; AvatarStack.displayName = "AvatarStack"; -var AvatarStack$1 = AvatarStack; -module.exports = AvatarStack$1; +module.exports = AvatarStack; diff --git a/lib/Box.js b/lib/Box.js index f088329c6a7..0e6bd973bb3 100644 --- a/lib/Box.js +++ b/lib/Box.js @@ -12,6 +12,5 @@ const Box = styled__default["default"].div.withConfig({ displayName: "Box", componentId: "sc-1gh2r6s-0" })(styledSystem.space, styledSystem.color, styledSystem.typography, styledSystem.layout, styledSystem.flexbox, styledSystem.grid, styledSystem.background, styledSystem.border, styledSystem.position, styledSystem.shadow, sx["default"]); -var Box$1 = Box; -module.exports = Box$1; +module.exports = Box; diff --git a/lib/BranchName.js b/lib/BranchName.js index d5fe4170730..eef7660baf9 100644 --- a/lib/BranchName.js +++ b/lib/BranchName.js @@ -12,6 +12,5 @@ const BranchName = styled__default["default"].a.withConfig({ displayName: "BranchName", componentId: "sc-lduqme-0" })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";text-decoration:none;", ";"], constants.get('fontSizes.0'), constants.get('fonts.mono'), constants.get('colors.accent.fg'), constants.get('colors.accent.subtle'), constants.get('radii.2'), sx["default"]); -var BranchName$1 = BranchName; -module.exports = BranchName$1; +module.exports = BranchName; diff --git a/lib/Button/ButtonBase.js b/lib/Button/ButtonBase.js index e514fd94d22..aaae25b4e76 100644 --- a/lib/Button/ButtonBase.js +++ b/lib/Button/ButtonBase.js @@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var ThemeProvider = require('../ThemeProvider.js'); var types = require('./types.js'); var styles = require('./styles.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Button/IconButton.js b/lib/Button/IconButton.js index 2846d375531..2a0da94d20c 100644 --- a/lib/Button/IconButton.js +++ b/lib/Button/IconButton.js @@ -3,12 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var ThemeProvider = require('../ThemeProvider.js'); var Box = require('../Box.js'); var types = require('./types.js'); var styles = require('./styles.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Button/LinkButton.js b/lib/Button/LinkButton.js index f230adac899..0fef13accc7 100644 --- a/lib/Button/LinkButton.js +++ b/lib/Button/LinkButton.js @@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); -require('../sx.js'); -var ButtonBase = require('./ButtonBase.js'); +require('@styled-system/css'); var merge = require('deepmerge'); +var ButtonBase = require('./ButtonBase.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ButtonGroup.js b/lib/ButtonGroup.js index eb982747fcb..df2ca9c71a7 100644 --- a/lib/ButtonGroup.js +++ b/lib/ButtonGroup.js @@ -12,6 +12,5 @@ const ButtonGroup = styled__default["default"].div.withConfig({ displayName: "ButtonGroup", componentId: "sc-tk435v-0" })(["display:inline-flex;vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx["default"]); -var ButtonGroup$1 = ButtonGroup; -module.exports = ButtonGroup$1; +module.exports = ButtonGroup; diff --git a/lib/Checkbox.js b/lib/Checkbox.js index 140c2984362..c4bdf8156b9 100644 --- a/lib/Checkbox.js +++ b/lib/Checkbox.js @@ -63,6 +63,5 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest)); }); Checkbox.displayName = 'Checkbox'; -var Checkbox$1 = Checkbox; -module.exports = Checkbox$1; +module.exports = Checkbox; diff --git a/lib/CounterLabel.js b/lib/CounterLabel.js index 1f060f931e0..5f6098662ae 100644 --- a/lib/CounterLabel.js +++ b/lib/CounterLabel.js @@ -30,6 +30,5 @@ const CounterLabel = styled__default["default"].span.withConfig({ displayName: "CounterLabel", componentId: "sc-13ceqbg-0" })(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], constants.get('fontSizes.0'), constants.get('fontWeights.bold'), constants.get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx["default"]); -var CounterLabel$1 = CounterLabel; -module.exports = CounterLabel$1; +module.exports = CounterLabel; diff --git a/lib/Details.js b/lib/Details.js index 3b2149fa0d4..ba3be1f003f 100644 --- a/lib/Details.js +++ b/lib/Details.js @@ -12,6 +12,5 @@ const Details = styled__default["default"].details.withConfig({ componentId: "sc-1qhvasm-0" })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx["default"]); Details.displayName = 'Details'; -var Details$1 = Details; -module.exports = Details$1; +module.exports = Details; diff --git a/lib/DropdownStyles.js b/lib/DropdownStyles.js index 5f25c5e0fd1..94488df4be8 100644 --- a/lib/DropdownStyles.js +++ b/lib/DropdownStyles.js @@ -126,6 +126,4 @@ const getDirectionStyles = (theme, direction) => { return map[direction]; }; -var getDirectionStyles$1 = getDirectionStyles; - -module.exports = getDirectionStyles$1; +module.exports = getDirectionStyles; diff --git a/lib/FilteredSearch.js b/lib/FilteredSearch.js index b2905a6ab8f..ef421a6f33e 100644 --- a/lib/FilteredSearch.js +++ b/lib/FilteredSearch.js @@ -12,6 +12,5 @@ const FilteredSearch = styled__default["default"].div.withConfig({ displayName: "FilteredSearch", componentId: "sc-1q2r5fr-0" })(["display:flex;align-items:stretch;summary,> button{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}", ""], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx["default"]); -var FilteredSearch$1 = FilteredSearch; -module.exports = FilteredSearch$1; +module.exports = FilteredSearch; diff --git a/lib/Flash.js b/lib/Flash.js index 33ff7b38812..85f13bb9189 100644 --- a/lib/Flash.js +++ b/lib/Flash.js @@ -52,6 +52,5 @@ const Flash = styled__default["default"].div.withConfig({ Flash.defaultProps = { variant: 'default' }; -var Flash$1 = Flash; -module.exports = Flash$1; +module.exports = Flash; diff --git a/lib/Heading.js b/lib/Heading.js index 00ed431db0b..82cecee7b14 100644 --- a/lib/Heading.js +++ b/lib/Heading.js @@ -12,6 +12,5 @@ const Heading = styled__default["default"].h2.withConfig({ displayName: "Heading", componentId: "sc-1irtotl-0" })(["font-weight:", ";font-size:", ";margin:0;", ";"], constants.get('fontWeights.bold'), constants.get('fontSizes.5'), sx["default"]); -var Heading$1 = Heading; -module.exports = Heading$1; +module.exports = Heading; diff --git a/lib/Label.js b/lib/Label.js index b047a7d807c..ea088048f8d 100644 --- a/lib/Label.js +++ b/lib/Label.js @@ -76,7 +76,6 @@ Label.defaultProps = { size: 'small', variant: 'default' }; -var Label$1 = Label; -exports["default"] = Label$1; +exports["default"] = Label; exports.variants = variants; diff --git a/lib/LabelGroup.js b/lib/LabelGroup.js index 897df744f10..6f9eb605192 100644 --- a/lib/LabelGroup.js +++ b/lib/LabelGroup.js @@ -12,6 +12,5 @@ const LabelGroup = styled__default["default"].span.withConfig({ displayName: "LabelGroup", componentId: "sc-1a0k7wh-0" })(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], constants.get('space.1'), sx["default"]); -var LabelGroup$1 = LabelGroup; -module.exports = LabelGroup$1; +module.exports = LabelGroup; diff --git a/lib/Link.js b/lib/Link.js index ec943d5d26c..0efd6e3b73d 100644 --- a/lib/Link.js +++ b/lib/Link.js @@ -19,6 +19,5 @@ const Link = styled__default["default"].a.withConfig({ displayName: "Link", componentId: "sc-hrxz1n-0" })(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? constants.get('colors.fg.muted')(props) : constants.get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${constants.get('colors.accent.fg')(props)}` : '', sx["default"]); -var Link$1 = Link; -module.exports = Link$1; +module.exports = Link; diff --git a/lib/Overlay.js b/lib/Overlay.js index 42741009f5c..e579c9eec49 100644 --- a/lib/Overlay.js +++ b/lib/Overlay.js @@ -164,6 +164,5 @@ Overlay.defaultProps = { height: 'auto', width: 'auto' }; -var Overlay$1 = Overlay; -module.exports = Overlay$1; +module.exports = Overlay; diff --git a/lib/PageLayout/PageLayout.js b/lib/PageLayout/PageLayout.js index 147ef136b33..328346cbab5 100644 --- a/lib/PageLayout/PageLayout.js +++ b/lib/PageLayout/PageLayout.js @@ -6,7 +6,7 @@ var React = require('react'); var useStickyPaneHeight = require('./useStickyPaneHeight.js'); var Box = require('../Box.js'); var useResponsiveValue = require('../hooks/useResponsiveValue.js'); -require('../sx.js'); +require('@styled-system/css'); var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Pagehead.js b/lib/Pagehead.js index 264cbe13075..78e3307b11d 100644 --- a/lib/Pagehead.js +++ b/lib/Pagehead.js @@ -12,6 +12,5 @@ const Pagehead = styled__default["default"].div.withConfig({ displayName: "Pagehead", componentId: "sc-17d52hr-0" })(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";"], constants.get('space.4'), constants.get('space.4'), constants.get('space.4'), constants.get('colors.border.default'), sx["default"]); -var Pagehead$1 = Pagehead; -module.exports = Pagehead$1; +module.exports = Pagehead; diff --git a/lib/Placeholder.js b/lib/Placeholder.js new file mode 100644 index 00000000000..cb4bcd40af8 --- /dev/null +++ b/lib/Placeholder.js @@ -0,0 +1,36 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); +var Box = require('./Box.js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +/** Private component used to render placeholders in storybook and documentation examples */ + +const Placeholder = ({ + width, + height, + id, + label +}) => { + return /*#__PURE__*/React__default["default"].createElement(Box, { + id: id, + sx: { + width: width !== null && width !== void 0 ? width : '100%', + height, + display: 'grid', + placeItems: 'center', + bg: 'canvas.inset', + borderRadius: 2, + border: '1px solid', + borderColor: 'border.subtle' + } + }, label); +}; +Placeholder.displayName = "Placeholder"; + +exports.Placeholder = Placeholder; diff --git a/lib/Radio.js b/lib/Radio.js index cdcc2e7ebf8..a1b2cf0708f 100644 --- a/lib/Radio.js +++ b/lib/Radio.js @@ -62,6 +62,5 @@ const Radio = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest)); }); Radio.displayName = 'Radio'; -var Radio$1 = Radio; -module.exports = Radio$1; +module.exports = Radio; diff --git a/lib/Spinner.js b/lib/Spinner.js index 1b267c2cf94..fc029f86bf4 100644 --- a/lib/Spinner.js +++ b/lib/Spinner.js @@ -49,6 +49,5 @@ const StyledSpinner = styled__default["default"](Spinner).withConfig({ componentId: "sc-1dxfx1i-0" })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx["default"]); StyledSpinner.displayName = 'Spinner'; -var Spinner$1 = StyledSpinner; -module.exports = Spinner$1; +module.exports = StyledSpinner; diff --git a/lib/StyledOcticon.js b/lib/StyledOcticon.js index b15b9b84408..79975d38898 100644 --- a/lib/StyledOcticon.js +++ b/lib/StyledOcticon.js @@ -32,6 +32,5 @@ const StyledOcticon = styled__default["default"](Octicon).withConfig({ StyledOcticon.defaultProps = { size: 16 }; -var StyledOcticon$1 = StyledOcticon; -module.exports = StyledOcticon$1; +module.exports = StyledOcticon; diff --git a/lib/Text.js b/lib/Text.js index 0e5d1001bcb..8d60236c023 100644 --- a/lib/Text.js +++ b/lib/Text.js @@ -12,6 +12,5 @@ const Text = styled__default["default"].span.withConfig({ displayName: "Text", componentId: "sc-125xb1i-0" })(["", ";", ";", ";"], constants.TYPOGRAPHY, constants.COMMON, sx["default"]); -var Text$1 = Text; -module.exports = Text$1; +module.exports = Text; diff --git a/lib/TextInputWithTokens.js b/lib/TextInputWithTokens.js index 216ef80a6e0..31aa6f26c56 100644 --- a/lib/TextInputWithTokens.js +++ b/lib/TextInputWithTokens.js @@ -326,6 +326,5 @@ TextInputWithTokens.defaultProps = { loaderPosition: 'auto' }; TextInputWithTokens.displayName = 'TextInputWithTokens'; -var TextInputWithTokens$1 = TextInputWithTokens; -module.exports = TextInputWithTokens$1; +module.exports = TextInputWithTokens; diff --git a/lib/Textarea.js b/lib/Textarea.js index 79d05dd61f7..6a53af3fffc 100644 --- a/lib/Textarea.js +++ b/lib/Textarea.js @@ -55,9 +55,8 @@ const Textarea = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest))); }); Textarea.displayName = 'Textarea'; -var Textarea$1 = Textarea; exports.DEFAULT_TEXTAREA_COLS = DEFAULT_TEXTAREA_COLS; exports.DEFAULT_TEXTAREA_RESIZE = DEFAULT_TEXTAREA_RESIZE; exports.DEFAULT_TEXTAREA_ROWS = DEFAULT_TEXTAREA_ROWS; -exports["default"] = Textarea$1; +exports["default"] = Textarea; diff --git a/lib/ThemeProvider.js b/lib/ThemeProvider.js index 5ddcaa637c9..9ec8b0da450 100644 --- a/lib/ThemeProvider.js +++ b/lib/ThemeProvider.js @@ -226,9 +226,7 @@ function applyColorScheme(theme, colorScheme) { }; } -var ThemeProvider$1 = ThemeProvider; - exports.ThemeProvider = ThemeProvider; -exports["default"] = ThemeProvider$1; +exports["default"] = ThemeProvider; exports.useColorSchemeVar = useColorSchemeVar; exports.useTheme = useTheme; diff --git a/lib/ToggleSwitch.js b/lib/ToggleSwitch.js index a1dc3480657..7c2f5be2084 100644 --- a/lib/ToggleSwitch.js +++ b/lib/ToggleSwitch.js @@ -193,6 +193,5 @@ Switch.defaultProps = { statusLabelPosition: 'start', size: 'medium' }; -var Switch$1 = Switch; -module.exports = Switch$1; +module.exports = Switch; diff --git a/lib/Token/Token.js b/lib/Token/Token.js index a3eaaf060ee..2cbf09e91fa 100644 --- a/lib/Token/Token.js +++ b/lib/Token/Token.js @@ -2,11 +2,11 @@ var React = require('react'); var Box = require('../Box.js'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var TokenBase = require('./TokenBase.js'); var _RemoveTokenButton = require('./_RemoveTokenButton.js'); var _TokenTextContainer = require('./_TokenTextContainer.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Truncate.js b/lib/Truncate.js index dc5c936fa7c..f7657fd1c60 100644 --- a/lib/Truncate.js +++ b/lib/Truncate.js @@ -17,6 +17,5 @@ Truncate.defaultProps = { inline: false, maxWidth: 125 }; -var Truncate$1 = Truncate; -module.exports = Truncate$1; +module.exports = Truncate; diff --git a/lib/UnderlineNav2/UnderlineNavItem.js b/lib/UnderlineNav2/UnderlineNavItem.js index 3602d3c6a95..ea012508186 100644 --- a/lib/UnderlineNav2/UnderlineNavItem.js +++ b/lib/UnderlineNav2/UnderlineNavItem.js @@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('../sx.js'); +require('@styled-system/css'); +var merge = require('deepmerge'); var UnderlineNavContext = require('./UnderlineNavContext.js'); var CounterLabel = require('../CounterLabel.js'); var styles = require('./styles.js'); var LoadingCounter = require('./LoadingCounter.js'); -var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/_InputCaption.js b/lib/_InputCaption.js index 842253c5134..7a9d9defcba 100644 --- a/lib/_InputCaption.js +++ b/lib/_InputCaption.js @@ -21,6 +21,5 @@ const InputCaption = ({ }, children); InputCaption.displayName = "InputCaption"; -var InputCaption$1 = InputCaption; -module.exports = InputCaption$1; +module.exports = InputCaption; diff --git a/lib/_InputLabel.js b/lib/_InputLabel.js index 5f8cf81916f..bf11431c43d 100644 --- a/lib/_InputLabel.js +++ b/lib/_InputLabel.js @@ -45,6 +45,5 @@ const InputLabel = ({ }; InputLabel.displayName = "InputLabel"; -var InputLabel$1 = InputLabel; -module.exports = InputLabel$1; +module.exports = InputLabel; diff --git a/lib/_InputValidation.js b/lib/_InputValidation.js index 9077054b1b2..bff64468148 100644 --- a/lib/_InputValidation.js +++ b/lib/_InputValidation.js @@ -57,6 +57,5 @@ const InputValidation = ({ }; InputValidation.displayName = "InputValidation"; -var InputValidation$1 = InputValidation; -module.exports = InputValidation$1; +module.exports = InputValidation; diff --git a/lib/_TextInputInnerAction.js b/lib/_TextInputInnerAction.js index c0565769e40..fffb639faa6 100644 --- a/lib/_TextInputInnerAction.js +++ b/lib/_TextInputInnerAction.js @@ -4,9 +4,9 @@ var React = require('react'); var Box = require('./Box.js'); var index = require('./Button/index.js'); var Tooltip = require('./Tooltip.js'); -require('./sx.js'); -var IconButton = require('./Button/IconButton.js'); +require('@styled-system/css'); var merge = require('deepmerge'); +var IconButton = require('./Button/IconButton.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -90,6 +90,5 @@ const TextInputAction = /*#__PURE__*/React.forwardRef(({ TextInputAction.defaultProps = { variant: 'invisible' }; -var TextInputAction$1 = TextInputAction; -module.exports = TextInputAction$1; +module.exports = TextInputAction; diff --git a/lib/_TextInputInnerVisualSlot.js b/lib/_TextInputInnerVisualSlot.js index bc1ce3846a0..bf658e062b7 100644 --- a/lib/_TextInputInnerVisualSlot.js +++ b/lib/_TextInputInnerVisualSlot.js @@ -53,6 +53,5 @@ const TextInputInnerVisualSlot = ({ }; TextInputInnerVisualSlot.displayName = "TextInputInnerVisualSlot"; -var TextInputInnerVisualSlot$1 = TextInputInnerVisualSlot; -module.exports = TextInputInnerVisualSlot$1; +module.exports = TextInputInnerVisualSlot; diff --git a/lib/_TextInputWrapper.js b/lib/_TextInputWrapper.js index dea6f5b1c64..57f31d27415 100644 --- a/lib/_TextInputWrapper.js +++ b/lib/_TextInputWrapper.js @@ -63,8 +63,7 @@ const TextInputWrapper = styled__default["default"](TextInputBaseWrapper).withCo displayName: "_TextInputWrapper__TextInputWrapper", componentId: "sc-apywy2-1" })(["background-repeat:no-repeat;background-position:right 8px center;& >:not(:last-child){margin-right:", ";}.TextInput-icon,.TextInput-action{align-self:center;color:", ";flex-shrink:0;}", " ", " ", ";"], constants.get('space.2'), constants.get('colors.fg.muted'), props => styled.css(["padding-left:", ";padding-right:", ";> input,> select{padding-left:", ";padding-right:", ";}"], props.hasLeadingVisual ? textInputHorizPadding : 0, props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0, !props.hasLeadingVisual ? textInputHorizPadding : 0, !props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0), props => props.validationStatus === 'warning' && styled.css(["border-color:", ";", ""], constants.get('colors.attention.emphasis'), renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))), sx["default"]); -var TextInputWrapper$1 = TextInputWrapper; exports.TextInputBaseWrapper = TextInputBaseWrapper; -exports["default"] = TextInputWrapper$1; +exports["default"] = TextInputWrapper; exports.textInputHorizPadding = textInputHorizPadding; diff --git a/lib/_UnstyledTextInput.js b/lib/_UnstyledTextInput.js index ae59b029fda..1fef6c7cd6c 100644 --- a/lib/_UnstyledTextInput.js +++ b/lib/_UnstyledTextInput.js @@ -11,6 +11,5 @@ const UnstyledTextInput = styled__default["default"].input.withConfig({ displayName: "_UnstyledTextInput__UnstyledTextInput", componentId: "sc-31b2um-0" })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx["default"]); -var UnstyledTextInput$1 = UnstyledTextInput; -module.exports = UnstyledTextInput$1; +module.exports = UnstyledTextInput; diff --git a/lib/_ValidationAnimationContainer.js b/lib/_ValidationAnimationContainer.js index 38233ab0bd9..4f6dfa5247b 100644 --- a/lib/_ValidationAnimationContainer.js +++ b/lib/_ValidationAnimationContainer.js @@ -38,6 +38,4 @@ const ValidationAnimationContainer = ({ }, children)) : null; }; -var ValidationAnimationContainer$1 = ValidationAnimationContainer; - -module.exports = ValidationAnimationContainer$1; +module.exports = ValidationAnimationContainer; diff --git a/lib/_VisuallyHidden.js b/lib/_VisuallyHidden.js index 0f60c7a6bf1..c37361e5fc3 100644 --- a/lib/_VisuallyHidden.js +++ b/lib/_VisuallyHidden.js @@ -30,6 +30,5 @@ const VisuallyHidden = styled__default["default"].span.withConfig({ VisuallyHidden.defaultProps = { isVisible: false }; -var VisuallyHidden$1 = VisuallyHidden; -module.exports = VisuallyHidden$1; +module.exports = VisuallyHidden; diff --git a/lib/_getGlobalFocusStyles.js b/lib/_getGlobalFocusStyles.js index d197caa93fe..e2fc8818186 100644 --- a/lib/_getGlobalFocusStyles.js +++ b/lib/_getGlobalFocusStyles.js @@ -7,6 +7,4 @@ const globalFocusStyle = styled.css(["box-shadow:none;outline:2px solid ", ";"], const getGlobalFocusStyles = outlineOffset => styled.css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset); -var getGlobalFocusStyles$1 = getGlobalFocusStyles; - -module.exports = getGlobalFocusStyles$1; +module.exports = getGlobalFocusStyles; diff --git a/lib/constants.js b/lib/constants.js index d1a3ef69d82..5923bb6fe54 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -43,8 +43,12 @@ const whiteSpace = system({ }); const TYPOGRAPHY = compose(styledSystem__namespace.typography, whiteSpace); // Border props -compose(styledSystem__namespace.border, styledSystem__namespace.shadow); +const BORDER = compose(styledSystem__namespace.border, styledSystem__namespace.shadow); +// Layout props +const LAYOUT = styledSystem__namespace.layout; +exports.BORDER = BORDER; exports.COMMON = COMMON; +exports.LAYOUT = LAYOUT; exports.TYPOGRAPHY = TYPOGRAPHY; exports.get = get; diff --git a/lib/index.js b/lib/index.js index 800b6c98718..33bdd77e494 100644 --- a/lib/index.js +++ b/lib/index.js @@ -92,7 +92,7 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge); exports.theme = themePreval; exports.themeGet = constants.get; exports.BaseStyles = BaseStyles; -exports.ThemeProvider = ThemeProvider["default"]; +exports.ThemeProvider = ThemeProvider.ThemeProvider; exports.useColorSchemeVar = ThemeProvider.useColorSchemeVar; exports.useTheme = ThemeProvider.useTheme; exports.Box = Box; diff --git a/lib/sx.js b/lib/sx.js index 6ac416ef867..01658faf219 100644 --- a/lib/sx.js +++ b/lib/sx.js @@ -12,10 +12,8 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge); const sx = props => css__default["default"](props.sx); -var sx$1 = sx; - Object.defineProperty(exports, 'merge', { enumerable: true, get: function () { return merge__default["default"]; } }); -exports["default"] = sx$1; +exports["default"] = sx; diff --git a/lib/utils/test-helpers.js b/lib/utils/test-helpers.js new file mode 100644 index 00000000000..cfe6fb8e0df --- /dev/null +++ b/lib/utils/test-helpers.js @@ -0,0 +1,15 @@ +'use strict'; + +// JSDOM doesn't mock ResizeObserver +global.ResizeObserver = jest.fn().mockImplementation(() => { + return { + observe: jest.fn(), + disconnect: jest.fn() + }; +}); +global.CSS = { + escape: jest.fn(), + supports: jest.fn().mockImplementation(() => { + return false; + }) +}; From 8f92b5766181f45344d6b972812bb442ba5f253b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 09:52:24 -0500 Subject: [PATCH 2/8] Update rollup.config.js --- rollup.config.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index f65d4e9d1da..ccdd20a8170 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,15 +17,6 @@ const input = new Set([ // "./deprecated" 'src/deprecated/index.ts', - // "./lib-esm/*" - ...glob.sync(['src/*', 'src/*/index.js'], { - cwd: __dirname, - onlyFiles: true, - // Note: ignore theme-preval as it is handled through the theme import and - // specifying it as an entrypoint creates an intermediate file - ignore: ['src/theme-preval.js'] - }), - // "./lib-esm/utils/test-helpers", "./lib/utils/test-helpers" 'src/utils/test-helpers.tsx' ]) From 7c6368ae0d6c5ab237a30545b6e0d4e36e2837e2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 10:19:44 -0500 Subject: [PATCH 3/8] chore: remove fast-glob dep --- package-lock.json | 1 - package.json | 1 - rollup.config.js | 1 - 3 files changed, 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9117eba50b0..4a2b3aaf1f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -100,7 +100,6 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", - "fast-glob": "3.2.12", "front-matter": "4.0.2", "husky": "7.0.4", "jest": "29.0.1", diff --git a/package.json b/package.json index 10266634e76..36b79cec31f 100644 --- a/package.json +++ b/package.json @@ -171,7 +171,6 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", - "fast-glob": "3.2.12", "front-matter": "4.0.2", "husky": "7.0.4", "jest": "29.0.1", diff --git a/rollup.config.js b/rollup.config.js index ccdd20a8170..f5a4dcc2a68 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,7 +1,6 @@ import commonjs from '@rollup/plugin-commonjs' import resolve from '@rollup/plugin-node-resolve' import babel from '@rollup/plugin-babel' -import glob from 'fast-glob' import {terser} from 'rollup-plugin-terser' import visualizer from 'rollup-plugin-visualizer' import packageJson from './package.json' From f4ffad0614136f3845cedb38329b265be5cc4dc7 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 10:32:25 -0500 Subject: [PATCH 4/8] fix: add support for hooks, polyfills, and utils --- package-lock.json | 1 + package.json | 5 ++--- rollup.config.js | 18 ++++++++++++++++-- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a2b3aaf1f3..9117eba50b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -100,6 +100,7 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", + "fast-glob": "3.2.12", "front-matter": "4.0.2", "husky": "7.0.4", "jest": "29.0.1", diff --git a/package.json b/package.json index 36b79cec31f..09d690a7371 100644 --- a/package.json +++ b/package.json @@ -26,9 +26,7 @@ "./lib/*.js", "./lib/*/index.js" ] - }, - "./lib-esm/utils/test-helpers": "./lib-esm/utils/test-helpers.js", - "./lib/utils/test-helpers": "./lib/utils/test-helpers.js" + } }, "typings": "lib/index.d.ts", "sideEffects": false, @@ -171,6 +169,7 @@ "eslint-plugin-primer-react": "0.7.4", "eslint-plugin-react": "7.24.0", "eslint-plugin-react-hooks": "4.2.0", + "fast-glob": "3.2.12", "front-matter": "4.0.2", "husky": "7.0.4", "jest": "29.0.1", diff --git a/rollup.config.js b/rollup.config.js index f5a4dcc2a68..a0c6462be62 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,6 +1,7 @@ import commonjs from '@rollup/plugin-commonjs' import resolve from '@rollup/plugin-node-resolve' import babel from '@rollup/plugin-babel' +import glob from 'fast-glob' import {terser} from 'rollup-plugin-terser' import visualizer from 'rollup-plugin-visualizer' import packageJson from './package.json' @@ -16,8 +17,21 @@ const input = new Set([ // "./deprecated" 'src/deprecated/index.ts', - // "./lib-esm/utils/test-helpers", "./lib/utils/test-helpers" - 'src/utils/test-helpers.tsx' + ...glob.sync( + [ + // "./lib-esm/hooks/*" + 'src/hooks/*', + + // "./lib-esm/polyfills/*" + 'src/polyfills/*', + + // "./lib-esm/utils/*" + 'src/utils/*' + ], + { + cwd: __dirname + } + ) ]) const extensions = ['.js', '.jsx', '.ts', '.tsx'] From 9105703cb181192b65126c4563b0f611f544e7ec Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 10:35:19 -0500 Subject: [PATCH 5/8] chore: add ignore patterns --- rollup.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index a0c6462be62..71303aae81e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -29,7 +29,8 @@ const input = new Set([ 'src/utils/*' ], { - cwd: __dirname + cwd: __dirname, + ignore: ['**/__tests__/**', '*.stories.tsx'] } ) ]) From e57ed0078a1f1a19aa27ac2e747cdc9a11f2de5a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 10:35:30 -0500 Subject: [PATCH 6/8] Update bug_report.yml (#2420) --- .github/ISSUE_TEMPLATE/bug_report.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 6a443193906..a6e2d230e7c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -23,7 +23,7 @@ body: id: reproduce attributes: label: Steps to reproduce - description: 'How do we reproduce the error you described above?' + description: 'How do we reproduce the error you described above? Feel free to use the `@primer/react` template on [CodeSandbox](https://codesandbox.io/s/primer-react-qyyepc) to get started' placeholder: | 1. Go to '...' 2. Click on '....' From c74a0b37bd73d0fe90c1d341a05a8ebff09a3652 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 11 Oct 2022 10:50:29 -0500 Subject: [PATCH 7/8] fix: add constants so all members are exported --- rollup.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/rollup.config.js b/rollup.config.js index 71303aae81e..5de47528673 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,6 +17,9 @@ const input = new Set([ // "./deprecated" 'src/deprecated/index.ts', + // Make sure all members are exported + 'src/constants.ts', + ...glob.sync( [ // "./lib-esm/hooks/*" From cc57ad0c31bab731e45d58a25f115cd020a97327 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 11 Oct 2022 18:13:59 +0200 Subject: [PATCH 8/8] use latest commit --- lib-esm/ActionList/Description.js | 4 +- lib-esm/ActionList/Divider.js | 2 +- lib-esm/ActionList/LinkItem.js | 4 +- lib-esm/ActionList/Visuals.js | 4 +- lib-esm/ActionMenu.js | 4 +- lib-esm/Autocomplete/AutocompleteMenu.js | 4 +- lib-esm/Avatar.js | 3 +- lib-esm/AvatarPair.js | 3 +- lib-esm/AvatarStack.js | 3 +- lib-esm/Box.js | 3 +- lib-esm/BranchName.js | 3 +- lib-esm/Button/ButtonBase.js | 4 +- lib-esm/Button/IconButton.js | 4 +- lib-esm/Button/LinkButton.js | 4 +- lib-esm/ButtonGroup.js | 3 +- lib-esm/Checkbox.js | 7 +- lib-esm/CounterLabel.js | 3 +- lib-esm/Details.js | 3 +- lib-esm/DropdownStyles.js | 4 +- .../FilteredActionList/FilteredActionList.js | 4 +- lib-esm/FilteredSearch.js | 3 +- lib-esm/Flash.js | 3 +- lib-esm/Heading.js | 3 +- lib-esm/Label.js | 3 +- lib-esm/LabelGroup.js | 3 +- lib-esm/Link.js | 3 +- lib-esm/Overlay.js | 7 +- lib-esm/PageLayout/PageLayout.js | 2 +- lib-esm/Pagehead.js | 3 +- lib-esm/Placeholder.js | 28 -- lib-esm/Portal/Portal.js | 4 +- lib-esm/Radio.js | 3 +- lib-esm/Spinner.js | 3 +- lib-esm/StyledOcticon.js | 3 +- lib-esm/Text.js | 3 +- lib-esm/TextInputWithTokens.js | 3 +- lib-esm/Textarea.js | 3 +- lib-esm/ThemeProvider.js | 8 +- lib-esm/ToggleSwitch.js | 7 +- lib-esm/Token/Token.js | 4 +- lib-esm/TreeView/TreeView.js | 4 +- lib-esm/Truncate.js | 3 +- lib-esm/UnderlineNav2/UnderlineNavItem.js | 4 +- lib-esm/_InputCaption.js | 3 +- lib-esm/_InputLabel.js | 3 +- lib-esm/_InputValidation.js | 3 +- lib-esm/_TextInputInnerAction.js | 7 +- lib-esm/_TextInputInnerVisualSlot.js | 7 +- lib-esm/_TextInputWrapper.js | 3 +- lib-esm/_UnstyledTextInput.js | 3 +- lib-esm/_ValidationAnimationContainer.js | 4 +- lib-esm/_VisuallyHidden.js | 3 +- lib-esm/_getGlobalFocusStyles.js | 4 +- .../SelectMenu/SelectMenuLoadingAnimation.js | 4 +- .../_AutocompleteSuggestions.js | 4 +- lib-esm/drafts/MarkdownEditor/_Footer.js | 4 +- .../drafts/MarkdownViewer/MarkdownViewer.js | 4 +- lib-esm/hooks/index.js | 12 + lib-esm/hooks/useAnchoredPosition.js | 4 +- lib-esm/hooks/useControllableState.js | 11 +- lib-esm/hooks/useMedia.js | 54 +++- lib-esm/hooks/useResizeObserver.js | 6 +- lib-esm/index.js | 4 +- lib-esm/polyfills/eventListenerSignal.js | 59 ++++ lib-esm/sx.js | 4 +- lib-esm/utils/create-slots.js | 10 +- lib-esm/utils/deprecate.js | 55 ++++ lib-esm/utils/polymorphic.js | 1 + lib-esm/utils/ssr.js | 1 + lib-esm/utils/story-helpers.js | 278 +++++++++++++++++ lib-esm/utils/test-deprecations.js | 17 + lib-esm/utils/test-matchers.js | 112 +++++++ lib-esm/utils/testing.js | 250 +++++++++++++++ lib-esm/utils/theme.js | 1 + lib-esm/utils/theme2.js | 72 +++++ lib-esm/utils/useIsomorphicLayoutEffect.js | 7 +- lib/ActionList/Description.js | 4 +- lib/ActionList/Divider.js | 2 +- lib/ActionList/LinkItem.js | 4 +- lib/ActionList/Visuals.js | 4 +- lib/ActionMenu.js | 4 +- lib/Avatar.js | 3 +- lib/AvatarPair.js | 3 +- lib/AvatarStack.js | 3 +- lib/Box.js | 3 +- lib/BranchName.js | 3 +- lib/Button/ButtonBase.js | 4 +- lib/Button/IconButton.js | 4 +- lib/Button/LinkButton.js | 4 +- lib/ButtonGroup.js | 3 +- lib/Checkbox.js | 3 +- lib/CounterLabel.js | 3 +- lib/Details.js | 3 +- lib/DropdownStyles.js | 4 +- lib/FilteredSearch.js | 3 +- lib/Flash.js | 3 +- lib/Heading.js | 3 +- lib/Label.js | 3 +- lib/LabelGroup.js | 3 +- lib/Link.js | 3 +- lib/Overlay.js | 3 +- lib/PageLayout/PageLayout.js | 2 +- lib/Pagehead.js | 3 +- lib/Placeholder.js | 36 --- lib/Radio.js | 3 +- lib/Spinner.js | 3 +- lib/StyledOcticon.js | 3 +- lib/Text.js | 3 +- lib/TextInputWithTokens.js | 3 +- lib/Textarea.js | 3 +- lib/ThemeProvider.js | 4 +- lib/ToggleSwitch.js | 3 +- lib/Token/Token.js | 4 +- lib/Truncate.js | 3 +- lib/UnderlineNav2/UnderlineNavItem.js | 4 +- lib/_InputCaption.js | 3 +- lib/_InputLabel.js | 3 +- lib/_InputValidation.js | 3 +- lib/_TextInputInnerAction.js | 7 +- lib/_TextInputInnerVisualSlot.js | 3 +- lib/_TextInputWrapper.js | 3 +- lib/_UnstyledTextInput.js | 3 +- lib/_ValidationAnimationContainer.js | 4 +- lib/_VisuallyHidden.js | 3 +- lib/_getGlobalFocusStyles.js | 4 +- lib/hooks/index.js | 31 ++ lib/hooks/useControllableState.js | 11 +- lib/hooks/useMedia.js | 51 +++ lib/index.js | 6 +- lib/polyfills/eventListenerSignal.js | 63 ++++ lib/sx.js | 4 +- lib/utils/create-slots.js | 4 +- lib/utils/deprecate.js | 60 ++++ lib/utils/polymorphic.js | 2 + lib/utils/ssr.js | 16 + lib/utils/story-helpers.js | 294 ++++++++++++++++++ lib/utils/test-deprecations.js | 23 ++ lib/utils/test-matchers.js | 118 +++++++ lib/utils/testing.js | 278 +++++++++++++++++ lib/utils/theme.js | 7 + lib/utils/theme2.js | 80 +++++ lib/utils/useIsomorphicLayoutEffect.js | 3 +- 142 files changed, 2188 insertions(+), 255 deletions(-) delete mode 100644 lib-esm/Placeholder.js create mode 100644 lib-esm/hooks/index.js create mode 100644 lib-esm/polyfills/eventListenerSignal.js create mode 100644 lib-esm/utils/deprecate.js create mode 100644 lib-esm/utils/polymorphic.js create mode 100644 lib-esm/utils/ssr.js create mode 100644 lib-esm/utils/story-helpers.js create mode 100644 lib-esm/utils/test-deprecations.js create mode 100644 lib-esm/utils/test-matchers.js create mode 100644 lib-esm/utils/testing.js create mode 100644 lib-esm/utils/theme.js create mode 100644 lib-esm/utils/theme2.js delete mode 100644 lib/Placeholder.js create mode 100644 lib/hooks/index.js create mode 100644 lib/polyfills/eventListenerSignal.js create mode 100644 lib/utils/deprecate.js create mode 100644 lib/utils/polymorphic.js create mode 100644 lib/utils/ssr.js create mode 100644 lib/utils/story-helpers.js create mode 100644 lib/utils/test-deprecations.js create mode 100644 lib/utils/test-matchers.js create mode 100644 lib/utils/testing.js create mode 100644 lib/utils/theme.js create mode 100644 lib/utils/theme2.js diff --git a/lib-esm/ActionList/Description.js b/lib-esm/ActionList/Description.js index 2ec210d13b4..8fd17dea8d1 100644 --- a/lib-esm/ActionList/Description.js +++ b/lib-esm/ActionList/Description.js @@ -1,9 +1,9 @@ import React from 'react'; import Box from '../Box.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import Truncate from '../Truncate.js'; import { Slot } from './shared.js'; +import merge from 'deepmerge'; const Description = ({ variant = 'inline', diff --git a/lib-esm/ActionList/Divider.js b/lib-esm/ActionList/Divider.js index 48772baf70a..194c3100275 100644 --- a/lib-esm/ActionList/Divider.js +++ b/lib-esm/ActionList/Divider.js @@ -1,7 +1,7 @@ import React from 'react'; import Box from '../Box.js'; import { get } from '../constants.js'; -import '@styled-system/css'; +import '../sx.js'; import merge from 'deepmerge'; /** diff --git a/lib-esm/ActionList/LinkItem.js b/lib-esm/ActionList/LinkItem.js index 68490b1749e..95472eb70ed 100644 --- a/lib-esm/ActionList/LinkItem.js +++ b/lib-esm/ActionList/LinkItem.js @@ -1,8 +1,8 @@ import React from 'react'; import Link from '../Link.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { Item } from './Item.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LinkItem = /*#__PURE__*/React.forwardRef(({ diff --git a/lib-esm/ActionList/Visuals.js b/lib-esm/ActionList/Visuals.js index 27729c8a692..b6e9041724b 100644 --- a/lib-esm/ActionList/Visuals.js +++ b/lib-esm/ActionList/Visuals.js @@ -1,9 +1,9 @@ import React from 'react'; import Box from '../Box.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { get } from '../constants.js'; import { Slot, getVariantStyles, TEXT_ROW_HEIGHT } from './shared.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LeadingVisualContainer = ({ diff --git a/lib-esm/ActionMenu.js b/lib-esm/ActionMenu.js index 21e147c82df..bb5a1154ddb 100644 --- a/lib-esm/ActionMenu.js +++ b/lib-esm/ActionMenu.js @@ -4,12 +4,12 @@ import { TriangleDownIcon } from '@primer/octicons-react'; import { Divider } from './ActionList/Divider.js'; import { ActionListContainerContext } from './ActionList/ActionListContainerContext.js'; import { Button } from './Button/index.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import './sx.js'; import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate.js'; import { useProvidedRefOrCreate } from './hooks/useProvidedRefOrCreate.js'; import { useMenuKeyboardNavigation } from './hooks/useMenuKeyboardNavigation.js'; import { AnchoredOverlay } from './AnchoredOverlay/AnchoredOverlay.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const MenuContext = /*#__PURE__*/React.createContext({ diff --git a/lib-esm/Autocomplete/AutocompleteMenu.js b/lib-esm/Autocomplete/AutocompleteMenu.js index f153dfc748d..fdff8f526cc 100644 --- a/lib-esm/Autocomplete/AutocompleteMenu.js +++ b/lib-esm/Autocomplete/AutocompleteMenu.js @@ -3,7 +3,7 @@ import { scrollIntoView } from '@primer/behaviors'; import { ActionList } from '../deprecated/ActionList/index.js'; import { useFocusZone } from '../hooks/useFocusZone.js'; import Box from '../Box.js'; -import StyledSpinner from '../Spinner.js'; +import Spinner from '../Spinner.js'; import { AutocompleteContext } from './AutocompleteContext.js'; import { PlusIcon } from '@primer/octicons-react'; import VisuallyHidden from '../_VisuallyHidden.js'; @@ -178,7 +178,7 @@ function AutocompleteMenu(props) { p: 3, display: "flex", justifyContent: "center" - }, /*#__PURE__*/React.createElement(StyledSpinner, null)) : /*#__PURE__*/React.createElement("div", { + }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", { ref: listContainerRef }, allItemsToRender.length ? /*#__PURE__*/React.createElement(ActionList, { selectionVariant: "multiple" // have to typecast to `ItemProps` because we have an extra property diff --git a/lib-esm/Avatar.js b/lib-esm/Avatar.js index 540f15867e1..8b0fd33da44 100644 --- a/lib-esm/Avatar.js +++ b/lib-esm/Avatar.js @@ -25,5 +25,6 @@ Avatar.defaultProps = { alt: '', square: false }; +var Avatar$1 = Avatar; -export { Avatar as default }; +export { Avatar$1 as default }; diff --git a/lib-esm/AvatarPair.js b/lib-esm/AvatarPair.js index 60954bf7aa3..234c16b1cf7 100644 --- a/lib-esm/AvatarPair.js +++ b/lib-esm/AvatarPair.js @@ -33,5 +33,6 @@ const AvatarPair = ({ AvatarPair.displayName = "AvatarPair"; // styled() changes this AvatarPair.displayName = 'AvatarPair'; +var AvatarPair$1 = AvatarPair; -export { AvatarPair as default }; +export { AvatarPair$1 as default }; diff --git a/lib-esm/AvatarStack.js b/lib-esm/AvatarStack.js index 348e8e189c6..76aa06987f3 100644 --- a/lib-esm/AvatarStack.js +++ b/lib-esm/AvatarStack.js @@ -43,5 +43,6 @@ const AvatarStack = ({ }; AvatarStack.displayName = "AvatarStack"; +var AvatarStack$1 = AvatarStack; -export { AvatarStack as default }; +export { AvatarStack$1 as default }; diff --git a/lib-esm/Box.js b/lib-esm/Box.js index eec0c66e992..9cc0bbf8dae 100644 --- a/lib-esm/Box.js +++ b/lib-esm/Box.js @@ -6,5 +6,6 @@ const Box = styled.div.withConfig({ displayName: "Box", componentId: "sc-1gh2r6s-0" })(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx); +var Box$1 = Box; -export { Box as default }; +export { Box$1 as default }; diff --git a/lib-esm/BranchName.js b/lib-esm/BranchName.js index aa99423ca7c..90f519d37d1 100644 --- a/lib-esm/BranchName.js +++ b/lib-esm/BranchName.js @@ -6,5 +6,6 @@ const BranchName = styled.a.withConfig({ displayName: "BranchName", componentId: "sc-lduqme-0" })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";text-decoration:none;", ";"], get('fontSizes.0'), get('fonts.mono'), get('colors.accent.fg'), get('colors.accent.subtle'), get('radii.2'), sx); +var BranchName$1 = BranchName; -export { BranchName as default }; +export { BranchName$1 as default }; diff --git a/lib-esm/Button/ButtonBase.js b/lib-esm/Button/ButtonBase.js index dd0a55482fa..ec4cc279d01 100644 --- a/lib-esm/Button/ButtonBase.js +++ b/lib-esm/Button/ButtonBase.js @@ -1,10 +1,10 @@ import React, { forwardRef, useMemo } from 'react'; import Box from '../Box.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { useTheme } from '../ThemeProvider.js'; import { StyledButton } from './types.js'; import { getButtonStyles, getSizeStyles, getVariantStyles } from './styles.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const defaultSxProp = {}; diff --git a/lib-esm/Button/IconButton.js b/lib-esm/Button/IconButton.js index 57568bd3d51..82dd3a9e8b9 100644 --- a/lib-esm/Button/IconButton.js +++ b/lib-esm/Button/IconButton.js @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { useTheme } from '../ThemeProvider.js'; import Box from '../Box.js'; import { StyledButton } from './types.js'; import { getBaseStyles, getSizeStyles, getVariantStyles } from './styles.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => { diff --git a/lib-esm/Button/LinkButton.js b/lib-esm/Button/LinkButton.js index 98c58f03d39..8a1d803e770 100644 --- a/lib-esm/Button/LinkButton.js +++ b/lib-esm/Button/LinkButton.js @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { ButtonBase } from './ButtonBase.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const LinkButton = /*#__PURE__*/forwardRef(({ diff --git a/lib-esm/ButtonGroup.js b/lib-esm/ButtonGroup.js index 76c8b2e9a5a..1eee76ce97a 100644 --- a/lib-esm/ButtonGroup.js +++ b/lib-esm/ButtonGroup.js @@ -6,5 +6,6 @@ const ButtonGroup = styled.div.withConfig({ displayName: "ButtonGroup", componentId: "sc-tk435v-0" })(["display:inline-flex;vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx); +var ButtonGroup$1 = ButtonGroup; -export { ButtonGroup as default }; +export { ButtonGroup$1 as default }; diff --git a/lib-esm/Checkbox.js b/lib-esm/Checkbox.js index 41b80cff176..5e0d13c564a 100644 --- a/lib-esm/Checkbox.js +++ b/lib-esm/Checkbox.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; import React, { useContext } from 'react'; import sx from './sx.js'; -import useLayoutEffect from './utils/useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from './utils/useIsomorphicLayoutEffect.js'; import { CheckboxGroupContext } from './CheckboxGroupContext.js'; import getGlobalFocusStyles from './_getGlobalFocusStyles.js'; import { useProvidedRefOrCreate } from './hooks/useProvidedRefOrCreate.js'; @@ -34,7 +34,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({ onChange && onChange(e); }; - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (checkboxRef.current) { checkboxRef.current.indeterminate = indeterminate || false; } @@ -56,5 +56,6 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({ }, rest)); }); Checkbox.displayName = 'Checkbox'; +var Checkbox$1 = Checkbox; -export { Checkbox as default }; +export { Checkbox$1 as default }; diff --git a/lib-esm/CounterLabel.js b/lib-esm/CounterLabel.js index 476d988c287..d484c5102e4 100644 --- a/lib-esm/CounterLabel.js +++ b/lib-esm/CounterLabel.js @@ -24,5 +24,6 @@ const CounterLabel = styled.span.withConfig({ displayName: "CounterLabel", componentId: "sc-13ceqbg-0" })(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx); +var CounterLabel$1 = CounterLabel; -export { CounterLabel as default }; +export { CounterLabel$1 as default }; diff --git a/lib-esm/Details.js b/lib-esm/Details.js index 9951fea585e..f37561e42ad 100644 --- a/lib-esm/Details.js +++ b/lib-esm/Details.js @@ -6,5 +6,6 @@ const Details = styled.details.withConfig({ componentId: "sc-1qhvasm-0" })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx); Details.displayName = 'Details'; +var Details$1 = Details; -export { Details as default }; +export { Details$1 as default }; diff --git a/lib-esm/DropdownStyles.js b/lib-esm/DropdownStyles.js index a3bcd6a1496..44af246264c 100644 --- a/lib-esm/DropdownStyles.js +++ b/lib-esm/DropdownStyles.js @@ -124,4 +124,6 @@ const getDirectionStyles = (theme, direction) => { return map[direction]; }; -export { getDirectionStyles as default }; +var getDirectionStyles$1 = getDirectionStyles; + +export { getDirectionStyles$1 as default }; diff --git a/lib-esm/FilteredActionList/FilteredActionList.js b/lib-esm/FilteredActionList/FilteredActionList.js index 84be75f838f..9f3e2542973 100644 --- a/lib-esm/FilteredActionList/FilteredActionList.js +++ b/lib-esm/FilteredActionList/FilteredActionList.js @@ -3,7 +3,7 @@ import { useSSRSafeId } from '@react-aria/ssr'; import TextInput from '../TextInput.js'; import Box from '../Box.js'; import { ActionList } from '../deprecated/ActionList/index.js'; -import StyledSpinner from '../Spinner.js'; +import Spinner from '../Spinner.js'; import { useFocusZone } from '../hooks/useFocusZone.js'; import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js'; import styled from 'styled-components'; @@ -103,7 +103,7 @@ function FilteredActionList({ justifyContent: "center", pt: 6, pb: 7 - }, /*#__PURE__*/React.createElement(StyledSpinner, null)) : /*#__PURE__*/React.createElement(ActionList, _extends({ + }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(ActionList, _extends({ ref: listContainerRef, items: items }, listProps, { diff --git a/lib-esm/FilteredSearch.js b/lib-esm/FilteredSearch.js index 73e6ad6fab9..5a7aa4330fd 100644 --- a/lib-esm/FilteredSearch.js +++ b/lib-esm/FilteredSearch.js @@ -6,5 +6,6 @@ const FilteredSearch = styled.div.withConfig({ displayName: "FilteredSearch", componentId: "sc-1q2r5fr-0" })(["display:flex;align-items:stretch;summary,> button{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}", ""], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx); +var FilteredSearch$1 = FilteredSearch; -export { FilteredSearch as default }; +export { FilteredSearch$1 as default }; diff --git a/lib-esm/Flash.js b/lib-esm/Flash.js index 78038da8d8c..38a18c54a84 100644 --- a/lib-esm/Flash.js +++ b/lib-esm/Flash.js @@ -46,5 +46,6 @@ const Flash = styled.div.withConfig({ Flash.defaultProps = { variant: 'default' }; +var Flash$1 = Flash; -export { Flash as default }; +export { Flash$1 as default }; diff --git a/lib-esm/Heading.js b/lib-esm/Heading.js index d344653be70..c51029260d1 100644 --- a/lib-esm/Heading.js +++ b/lib-esm/Heading.js @@ -6,5 +6,6 @@ const Heading = styled.h2.withConfig({ displayName: "Heading", componentId: "sc-1irtotl-0" })(["font-weight:", ";font-size:", ";margin:0;", ";"], get('fontWeights.bold'), get('fontSizes.5'), sx); +var Heading$1 = Heading; -export { Heading as default }; +export { Heading$1 as default }; diff --git a/lib-esm/Label.js b/lib-esm/Label.js index 3f63b8b5b24..5c8eb09e3e1 100644 --- a/lib-esm/Label.js +++ b/lib-esm/Label.js @@ -68,5 +68,6 @@ Label.defaultProps = { size: 'small', variant: 'default' }; +var Label$1 = Label; -export { Label as default, variants }; +export { Label$1 as default, variants }; diff --git a/lib-esm/LabelGroup.js b/lib-esm/LabelGroup.js index ee9fb8e0714..6855c6c994d 100644 --- a/lib-esm/LabelGroup.js +++ b/lib-esm/LabelGroup.js @@ -6,5 +6,6 @@ const LabelGroup = styled.span.withConfig({ displayName: "LabelGroup", componentId: "sc-1a0k7wh-0" })(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], get('space.1'), sx); +var LabelGroup$1 = LabelGroup; -export { LabelGroup as default }; +export { LabelGroup$1 as default }; diff --git a/lib-esm/Link.js b/lib-esm/Link.js index 7c6a58a82c3..d01907640fb 100644 --- a/lib-esm/Link.js +++ b/lib-esm/Link.js @@ -13,5 +13,6 @@ const Link = styled.a.withConfig({ displayName: "Link", componentId: "sc-hrxz1n-0" })(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '', sx); +var Link$1 = Link; -export { Link as default }; +export { Link$1 as default }; diff --git a/lib-esm/Overlay.js b/lib-esm/Overlay.js index 6c517f84c91..a5ff9245bf8 100644 --- a/lib-esm/Overlay.js +++ b/lib-esm/Overlay.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; import React, { useRef, useEffect } from 'react'; -import useLayoutEffect from './utils/useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from './utils/useIsomorphicLayoutEffect.js'; import { get } from './constants.js'; import Portal from './Portal/index.js'; import sx from './sx.js'; @@ -119,7 +119,7 @@ const Overlay = /*#__PURE__*/React.forwardRef(({ overlayRef.current.style.height = `${overlayRef.current.clientHeight}px`; } }, [height]); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { var _overlayRef$current2; const { @@ -157,5 +157,6 @@ Overlay.defaultProps = { height: 'auto', width: 'auto' }; +var Overlay$1 = Overlay; -export { Overlay as default }; +export { Overlay$1 as default }; diff --git a/lib-esm/PageLayout/PageLayout.js b/lib-esm/PageLayout/PageLayout.js index b5f156f56bd..b2b7b72d4bd 100644 --- a/lib-esm/PageLayout/PageLayout.js +++ b/lib-esm/PageLayout/PageLayout.js @@ -2,7 +2,7 @@ import React from 'react'; import { useStickyPaneHeight } from './useStickyPaneHeight.js'; import Box from '../Box.js'; import { isResponsiveValue, useResponsiveValue } from '../hooks/useResponsiveValue.js'; -import '@styled-system/css'; +import '../sx.js'; import merge from 'deepmerge'; const REGION_ORDER = { diff --git a/lib-esm/Pagehead.js b/lib-esm/Pagehead.js index 19f6de9a9ad..02b1e4575ad 100644 --- a/lib-esm/Pagehead.js +++ b/lib-esm/Pagehead.js @@ -6,5 +6,6 @@ const Pagehead = styled.div.withConfig({ displayName: "Pagehead", componentId: "sc-17d52hr-0" })(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";"], get('space.4'), get('space.4'), get('space.4'), get('colors.border.default'), sx); +var Pagehead$1 = Pagehead; -export { Pagehead as default }; +export { Pagehead$1 as default }; diff --git a/lib-esm/Placeholder.js b/lib-esm/Placeholder.js deleted file mode 100644 index 84fe16c3f42..00000000000 --- a/lib-esm/Placeholder.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import Box from './Box.js'; - -/** Private component used to render placeholders in storybook and documentation examples */ - -const Placeholder = ({ - width, - height, - id, - label -}) => { - return /*#__PURE__*/React.createElement(Box, { - id: id, - sx: { - width: width !== null && width !== void 0 ? width : '100%', - height, - display: 'grid', - placeItems: 'center', - bg: 'canvas.inset', - borderRadius: 2, - border: '1px solid', - borderColor: 'border.subtle' - } - }, label); -}; -Placeholder.displayName = "Placeholder"; - -export { Placeholder }; diff --git a/lib-esm/Portal/Portal.js b/lib-esm/Portal/Portal.js index 4f3dd0aad59..c8aa6483f36 100644 --- a/lib-esm/Portal/Portal.js +++ b/lib-esm/Portal/Portal.js @@ -1,6 +1,6 @@ import React from 'react'; import { createPortal } from 'react-dom'; -import useLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'; const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'; @@ -59,7 +59,7 @@ const Portal = ({ hostElement.style.position = 'relative'; hostElement.style.zIndex = '1'; const elementRef = React.useRef(hostElement); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { let containerName = _containerName; if (containerName === undefined) { diff --git a/lib-esm/Radio.js b/lib-esm/Radio.js index c224772076f..e7e74b1a3ea 100644 --- a/lib-esm/Radio.js +++ b/lib-esm/Radio.js @@ -55,5 +55,6 @@ const Radio = /*#__PURE__*/React.forwardRef(({ }, rest)); }); Radio.displayName = 'Radio'; +var Radio$1 = Radio; -export { Radio as default }; +export { Radio$1 as default }; diff --git a/lib-esm/Spinner.js b/lib-esm/Spinner.js index 822ddee8089..3875a69b759 100644 --- a/lib-esm/Spinner.js +++ b/lib-esm/Spinner.js @@ -42,5 +42,6 @@ const StyledSpinner = styled(Spinner).withConfig({ componentId: "sc-1dxfx1i-0" })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx); StyledSpinner.displayName = 'Spinner'; +var Spinner$1 = StyledSpinner; -export { StyledSpinner as default }; +export { Spinner$1 as default }; diff --git a/lib-esm/StyledOcticon.js b/lib-esm/StyledOcticon.js index 8cbde0d81af..23d0ae198d4 100644 --- a/lib-esm/StyledOcticon.js +++ b/lib-esm/StyledOcticon.js @@ -25,5 +25,6 @@ const StyledOcticon = styled(Octicon).withConfig({ StyledOcticon.defaultProps = { size: 16 }; +var StyledOcticon$1 = StyledOcticon; -export { StyledOcticon as default }; +export { StyledOcticon$1 as default }; diff --git a/lib-esm/Text.js b/lib-esm/Text.js index f2b0ea81ff0..bf65c7897ce 100644 --- a/lib-esm/Text.js +++ b/lib-esm/Text.js @@ -6,5 +6,6 @@ const Text = styled.span.withConfig({ displayName: "Text", componentId: "sc-125xb1i-0" })(["", ";", ";", ";"], TYPOGRAPHY, COMMON, sx); +var Text$1 = Text; -export { Text as default }; +export { Text$1 as default }; diff --git a/lib-esm/TextInputWithTokens.js b/lib-esm/TextInputWithTokens.js index ca28d2891c9..49212e9ef03 100644 --- a/lib-esm/TextInputWithTokens.js +++ b/lib-esm/TextInputWithTokens.js @@ -320,5 +320,6 @@ TextInputWithTokens.defaultProps = { loaderPosition: 'auto' }; TextInputWithTokens.displayName = 'TextInputWithTokens'; +var TextInputWithTokens$1 = TextInputWithTokens; -export { TextInputWithTokens as default }; +export { TextInputWithTokens$1 as default }; diff --git a/lib-esm/Textarea.js b/lib-esm/Textarea.js index 126fd11f8e2..cdbacdb582d 100644 --- a/lib-esm/Textarea.js +++ b/lib-esm/Textarea.js @@ -46,5 +46,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({ }, rest))); }); Textarea.displayName = 'Textarea'; +var Textarea$1 = Textarea; -export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea as default }; +export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea$1 as default }; diff --git a/lib-esm/ThemeProvider.js b/lib-esm/ThemeProvider.js index 549bb889d2a..d255b2d807b 100644 --- a/lib-esm/ThemeProvider.js +++ b/lib-esm/ThemeProvider.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ThemeProvider as ThemeProvider$1 } from 'styled-components'; +import { ThemeProvider as ThemeProvider$2 } from 'styled-components'; import theme from './theme-preval.js'; import merge from 'deepmerge'; @@ -101,7 +101,7 @@ const ThemeProvider = ({ setDayScheme, setNightScheme } - }, /*#__PURE__*/React.createElement(ThemeProvider$1, { + }, /*#__PURE__*/React.createElement(ThemeProvider$2, { theme: resolvedTheme }, children, props.preventSSRMismatch ? /*#__PURE__*/React.createElement("script", { type: "application/json", @@ -217,4 +217,6 @@ function applyColorScheme(theme, colorScheme) { }; } -export { ThemeProvider, ThemeProvider as default, useColorSchemeVar, useTheme }; +var ThemeProvider$1 = ThemeProvider; + +export { ThemeProvider, ThemeProvider$1 as default, useColorSchemeVar, useTheme }; diff --git a/lib-esm/ToggleSwitch.js b/lib-esm/ToggleSwitch.js index 4ce25ec1f04..07b921297cc 100644 --- a/lib-esm/ToggleSwitch.js +++ b/lib-esm/ToggleSwitch.js @@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react'; import styled, { css } from 'styled-components'; import { variant } from 'styled-system'; import Box from './Box.js'; -import StyledSpinner from './Spinner.js'; +import Spinner from './Spinner.js'; import Text from './Text.js'; import { get } from './constants.js'; import sx from './sx.js'; @@ -114,7 +114,7 @@ const Switch = ({ alignItems: "center", flexDirection: statusLabelPosition === 'start' ? 'row' : 'row-reverse', sx: sxProp - }, loading ? /*#__PURE__*/React.createElement(StyledSpinner, { + }, loading ? /*#__PURE__*/React.createElement(Spinner, { size: "small" }) : null, /*#__PURE__*/React.createElement(Text, { color: acceptsInteraction ? 'fg.default' : 'fg.muted', @@ -186,5 +186,6 @@ Switch.defaultProps = { statusLabelPosition: 'start', size: 'medium' }; +var Switch$1 = Switch; -export { Switch as default }; +export { Switch$1 as default }; diff --git a/lib-esm/Token/Token.js b/lib-esm/Token/Token.js index d7aaaba6e30..6cdd34c2e37 100644 --- a/lib-esm/Token/Token.js +++ b/lib-esm/Token/Token.js @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react'; import Box from '../Box.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import TokenBase, { isTokenInteractive, defaultTokenSize } from './TokenBase.js'; import RemoveTokenButton from './_RemoveTokenButton.js'; import TokenTextContainer from './_TokenTextContainer.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const tokenBorderWidthPx = 1; diff --git a/lib-esm/TreeView/TreeView.js b/lib-esm/TreeView/TreeView.js index 42b1ba42e0b..eaa3a897066 100644 --- a/lib-esm/TreeView/TreeView.js +++ b/lib-esm/TreeView/TreeView.js @@ -4,7 +4,7 @@ import React from 'react'; import styled from 'styled-components'; import Box from '../Box.js'; import { useControllableState } from '../hooks/useControllableState.js'; -import StyledSpinner from '../Spinner.js'; +import Spinner from '../Spinner.js'; import StyledOcticon from '../StyledOcticon.js'; import sx from '../sx.js'; import Text from '../Text.js'; @@ -332,7 +332,7 @@ const LoadingItem = () => { return ( /*#__PURE__*/ // TODO: What aria attributes do we need to add here? - React.createElement(Item, null, /*#__PURE__*/React.createElement(LeadingVisual, null, /*#__PURE__*/React.createElement(StyledSpinner, { + React.createElement(Item, null, /*#__PURE__*/React.createElement(LeadingVisual, null, /*#__PURE__*/React.createElement(Spinner, { size: "small" })), /*#__PURE__*/React.createElement(Text, { sx: { diff --git a/lib-esm/Truncate.js b/lib-esm/Truncate.js index 1fb64fead5b..b47ffe4ddcc 100644 --- a/lib-esm/Truncate.js +++ b/lib-esm/Truncate.js @@ -11,5 +11,6 @@ Truncate.defaultProps = { inline: false, maxWidth: 125 }; +var Truncate$1 = Truncate; -export { Truncate as default }; +export { Truncate$1 as default }; diff --git a/lib-esm/UnderlineNav2/UnderlineNavItem.js b/lib-esm/UnderlineNav2/UnderlineNavItem.js index 9e272a5e5eb..e3f7b129374 100644 --- a/lib-esm/UnderlineNav2/UnderlineNavItem.js +++ b/lib-esm/UnderlineNav2/UnderlineNavItem.js @@ -1,11 +1,11 @@ import React, { forwardRef, useRef, useContext, useLayoutEffect } from 'react'; import Box from '../Box.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import '../sx.js'; import { UnderlineNavContext } from './UnderlineNavContext.js'; import CounterLabel from '../CounterLabel.js'; import { getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles } from './styles.js'; import { LoadingCounter } from './LoadingCounter.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } diff --git a/lib-esm/_InputCaption.js b/lib-esm/_InputCaption.js index 0f0fb78eb59..f0475ea6f73 100644 --- a/lib-esm/_InputCaption.js +++ b/lib-esm/_InputCaption.js @@ -15,5 +15,6 @@ const InputCaption = ({ }, children); InputCaption.displayName = "InputCaption"; +var InputCaption$1 = InputCaption; -export { InputCaption as default }; +export { InputCaption$1 as default }; diff --git a/lib-esm/_InputLabel.js b/lib-esm/_InputLabel.js index e7815031170..9670062e20a 100644 --- a/lib-esm/_InputLabel.js +++ b/lib-esm/_InputLabel.js @@ -39,5 +39,6 @@ const InputLabel = ({ }; InputLabel.displayName = "InputLabel"; +var InputLabel$1 = InputLabel; -export { InputLabel as default }; +export { InputLabel$1 as default }; diff --git a/lib-esm/_InputValidation.js b/lib-esm/_InputValidation.js index d6a8390d99a..b79c5a1c9b7 100644 --- a/lib-esm/_InputValidation.js +++ b/lib-esm/_InputValidation.js @@ -51,5 +51,6 @@ const InputValidation = ({ }; InputValidation.displayName = "InputValidation"; +var InputValidation$1 = InputValidation; -export { InputValidation as default }; +export { InputValidation$1 as default }; diff --git a/lib-esm/_TextInputInnerAction.js b/lib-esm/_TextInputInnerAction.js index fb120513224..6dacd604b69 100644 --- a/lib-esm/_TextInputInnerAction.js +++ b/lib-esm/_TextInputInnerAction.js @@ -2,9 +2,9 @@ import React, { forwardRef } from 'react'; import Box from './Box.js'; import { Button } from './Button/index.js'; import Tooltip from './Tooltip.js'; -import '@styled-system/css'; -import merge from 'deepmerge'; +import './sx.js'; import { IconButton } from './Button/IconButton.js'; +import merge from 'deepmerge'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } const invisibleButtonStyleOverrides = { @@ -83,5 +83,6 @@ const TextInputAction = /*#__PURE__*/forwardRef(({ TextInputAction.defaultProps = { variant: 'invisible' }; +var TextInputAction$1 = TextInputAction; -export { TextInputAction as default }; +export { TextInputAction$1 as default }; diff --git a/lib-esm/_TextInputInnerVisualSlot.js b/lib-esm/_TextInputInnerVisualSlot.js index c0528b17632..ddad084d8d8 100644 --- a/lib-esm/_TextInputInnerVisualSlot.js +++ b/lib-esm/_TextInputInnerVisualSlot.js @@ -1,6 +1,6 @@ import React from 'react'; import Box from './Box.js'; -import StyledSpinner from './Spinner.js'; +import Spinner from './Spinner.js'; const TextInputInnerVisualSlot = ({ children, @@ -27,7 +27,7 @@ const TextInputInnerVisualSlot = ({ sx: { visibility: showLoadingIndicator ? 'hidden' : 'visible' } - }, children), /*#__PURE__*/React.createElement(StyledSpinner, { + }, children), /*#__PURE__*/React.createElement(Spinner, { sx: children ? { position: 'absolute', top: 0, @@ -47,5 +47,6 @@ const TextInputInnerVisualSlot = ({ }; TextInputInnerVisualSlot.displayName = "TextInputInnerVisualSlot"; +var TextInputInnerVisualSlot$1 = TextInputInnerVisualSlot; -export { TextInputInnerVisualSlot as default }; +export { TextInputInnerVisualSlot$1 as default }; diff --git a/lib-esm/_TextInputWrapper.js b/lib-esm/_TextInputWrapper.js index 461fa077d02..59cea629bc2 100644 --- a/lib-esm/_TextInputWrapper.js +++ b/lib-esm/_TextInputWrapper.js @@ -55,5 +55,6 @@ const TextInputWrapper = styled(TextInputBaseWrapper).withConfig({ displayName: "_TextInputWrapper__TextInputWrapper", componentId: "sc-apywy2-1" })(["background-repeat:no-repeat;background-position:right 8px center;& >:not(:last-child){margin-right:", ";}.TextInput-icon,.TextInput-action{align-self:center;color:", ";flex-shrink:0;}", " ", " ", ";"], get('space.2'), get('colors.fg.muted'), props => css(["padding-left:", ";padding-right:", ";> input,> select{padding-left:", ";padding-right:", ";}"], props.hasLeadingVisual ? textInputHorizPadding : 0, props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0, !props.hasLeadingVisual ? textInputHorizPadding : 0, !props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0), props => props.validationStatus === 'warning' && css(["border-color:", ";", ""], get('colors.attention.emphasis'), renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))), sx); +var TextInputWrapper$1 = TextInputWrapper; -export { TextInputBaseWrapper, TextInputWrapper as default, textInputHorizPadding }; +export { TextInputBaseWrapper, TextInputWrapper$1 as default, textInputHorizPadding }; diff --git a/lib-esm/_UnstyledTextInput.js b/lib-esm/_UnstyledTextInput.js index 8f62224f136..bd0d822413e 100644 --- a/lib-esm/_UnstyledTextInput.js +++ b/lib-esm/_UnstyledTextInput.js @@ -5,5 +5,6 @@ const UnstyledTextInput = styled.input.withConfig({ displayName: "_UnstyledTextInput__UnstyledTextInput", componentId: "sc-31b2um-0" })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx); +var UnstyledTextInput$1 = UnstyledTextInput; -export { UnstyledTextInput as default }; +export { UnstyledTextInput$1 as default }; diff --git a/lib-esm/_ValidationAnimationContainer.js b/lib-esm/_ValidationAnimationContainer.js index 9852d83a2df..a34818e15f1 100644 --- a/lib-esm/_ValidationAnimationContainer.js +++ b/lib-esm/_ValidationAnimationContainer.js @@ -31,4 +31,6 @@ const ValidationAnimationContainer = ({ }, children)) : null; }; -export { ValidationAnimationContainer as default }; +var ValidationAnimationContainer$1 = ValidationAnimationContainer; + +export { ValidationAnimationContainer$1 as default }; diff --git a/lib-esm/_VisuallyHidden.js b/lib-esm/_VisuallyHidden.js index 80aa309dcf6..4b9dad3a002 100644 --- a/lib-esm/_VisuallyHidden.js +++ b/lib-esm/_VisuallyHidden.js @@ -24,5 +24,6 @@ const VisuallyHidden = styled.span.withConfig({ VisuallyHidden.defaultProps = { isVisible: false }; +var VisuallyHidden$1 = VisuallyHidden; -export { VisuallyHidden as default }; +export { VisuallyHidden$1 as default }; diff --git a/lib-esm/_getGlobalFocusStyles.js b/lib-esm/_getGlobalFocusStyles.js index d66f7897856..e3e9765cf6f 100644 --- a/lib-esm/_getGlobalFocusStyles.js +++ b/lib-esm/_getGlobalFocusStyles.js @@ -5,4 +5,6 @@ const globalFocusStyle = css(["box-shadow:none;outline:2px solid ", ";"], get('c const getGlobalFocusStyles = outlineOffset => css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset); -export { getGlobalFocusStyles as default }; +var getGlobalFocusStyles$1 = getGlobalFocusStyles; + +export { getGlobalFocusStyles$1 as default }; diff --git a/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js b/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js index 314b8966e04..4e6b4d22445 100644 --- a/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js +++ b/lib-esm/deprecated/SelectMenu/SelectMenuLoadingAnimation.js @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { get } from '../../constants.js'; -import StyledSpinner from '../../Spinner.js'; +import Spinner from '../../Spinner.js'; import sx from '../../sx.js'; const Animation = styled.div.withConfig({ @@ -10,7 +10,7 @@ const Animation = styled.div.withConfig({ })(["padding:", " ", ";text-align:center;background-color:", ";", ""], get('space.6'), get('space.4'), get('colors.canvas.overlay'), sx); const SelectMenuLoadingAnimation = props => { - return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(StyledSpinner, null)); + return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(Spinner, null)); }; SelectMenuLoadingAnimation.displayName = "SelectMenuLoadingAnimation"; diff --git a/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js b/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js index 94e66a01c0b..4f0486a87da 100644 --- a/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js +++ b/lib-esm/drafts/InlineAutocomplete/_AutocompleteSuggestions.js @@ -1,5 +1,5 @@ import React, { useState, useCallback } from 'react'; -import StyledSpinner from '../../Spinner.js'; +import Spinner from '../../Spinner.js'; import { ActionList } from '../../ActionList/index.js'; import Box from '../../Box.js'; import { useCombobox } from '../hooks/useCombobox.js'; @@ -12,7 +12,7 @@ const LoadingIndicator = () => /*#__PURE__*/React.createElement(Box, { justifyContent: 'center', py: 2 } -}, /*#__PURE__*/React.createElement(StyledSpinner, { +}, /*#__PURE__*/React.createElement(Spinner, { size: "small" })); diff --git a/lib-esm/drafts/MarkdownEditor/_Footer.js b/lib-esm/drafts/MarkdownEditor/_Footer.js index a5f12a58983..7554085c0cc 100644 --- a/lib-esm/drafts/MarkdownEditor/_Footer.js +++ b/lib-esm/drafts/MarkdownEditor/_Footer.js @@ -3,7 +3,7 @@ import { AlertIcon, MarkdownIcon, ImageIcon } from '@primer/octicons-react'; import { MarkdownEditorContext } from './_MarkdownEditorContext.js'; import Box from '../../Box.js'; import Text from '../../Text.js'; -import StyledSpinner from '../../Spinner.js'; +import Spinner from '../../Spinner.js'; import { Button } from '../../Button/index.js'; import { LinkButton } from '../../Button/LinkButton.js'; @@ -39,7 +39,7 @@ const Footer = ({ py: 1, px: 2 } -}, /*#__PURE__*/React.createElement(StyledSpinner, { +}, /*#__PURE__*/React.createElement(Spinner, { size: "small", sx: { mr: 1, diff --git a/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js b/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js index 02b6b0429fc..8f4910d54b9 100644 --- a/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js +++ b/lib-esm/drafts/MarkdownViewer/MarkdownViewer.js @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react'; import { useLinkInterception } from './_useLinkInterception.js'; import { useListInteraction } from './_useListInteraction.js'; import Box from '../../Box.js'; -import StyledSpinner from '../../Spinner.js'; +import Spinner from '../../Spinner.js'; const createRenderedContainer = html => { const div = document.createElement('div'); @@ -56,7 +56,7 @@ const MarkdownViewer = ({ justifyContent: 'space-around', p: 2 } - }, /*#__PURE__*/React.createElement(StyledSpinner, { + }, /*#__PURE__*/React.createElement(Spinner, { "aria-label": "Loading content..." })) : /*#__PURE__*/React.createElement(Box, { ref: outputContainerRef, diff --git a/lib-esm/hooks/index.js b/lib-esm/hooks/index.js new file mode 100644 index 00000000000..d729f19676a --- /dev/null +++ b/lib-esm/hooks/index.js @@ -0,0 +1,12 @@ +export { useOnOutsideClick } from './useOnOutsideClick.js'; +export { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js'; +export { useOnEscapePress } from './useOnEscapePress.js'; +export { useOpenAndCloseFocus } from './useOpenAndCloseFocus.js'; +export { useAnchoredPosition } from './useAnchoredPosition.js'; +export { useOverlay } from './useOverlay.js'; +export { useRenderForcingRef } from './useRenderForcingRef.js'; +export { useProvidedStateOrCreate } from './useProvidedStateOrCreate.js'; +export { useMenuInitialFocus } from './useMenuInitialFocus.js'; +export { useMenuKeyboardNavigation } from './useMenuKeyboardNavigation.js'; +export { useMnemonics } from './useMnemonics.js'; +export { useRefObjectAsForwardedRef } from './useRefObjectAsForwardedRef.js'; diff --git a/lib-esm/hooks/useAnchoredPosition.js b/lib-esm/hooks/useAnchoredPosition.js index 9d670042810..5912177806b 100644 --- a/lib-esm/hooks/useAnchoredPosition.js +++ b/lib-esm/hooks/useAnchoredPosition.js @@ -2,7 +2,7 @@ import React from 'react'; import { getAnchoredPosition } from '@primer/behaviors'; import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js'; import { useResizeObserver } from './useResizeObserver.js'; -import useLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; /** * Calculates the top and left values for an absolutely-positioned floating element @@ -25,7 +25,7 @@ function useAnchoredPosition(settings, dependencies = []) { } }, // eslint-disable-next-line react-hooks/exhaustive-deps [floatingElementRef, anchorElementRef, ...dependencies]); - useLayoutEffect(updatePosition, [updatePosition]); + useIsomorphicLayoutEffect(updatePosition, [updatePosition]); useResizeObserver(updatePosition); return { floatingElementRef, diff --git a/lib-esm/hooks/useControllableState.js b/lib-esm/hooks/useControllableState.js index 95271a090db..38053024103 100644 --- a/lib-esm/hooks/useControllableState.js +++ b/lib-esm/hooks/useControllableState.js @@ -43,15 +43,11 @@ function useControllableState({ const controlledValue = value !== undefined; // Uncontrolled -> Controlled // If the component prop is uncontrolled, the prop value should be undefined - if (controlled.current === false && controlledValue) { - warn(); - } // Controlled -> Uncontrolled + if (controlled.current === false && controlledValue) ; // Controlled -> Uncontrolled // If the component prop is controlled, the prop value should be defined - if (controlled.current === true && !controlledValue) { - warn(); - } + if (controlled.current === true && !controlledValue) ; }, [name, value]); if (controlled.current === true) { @@ -60,8 +56,5 @@ function useControllableState({ return [state, setState]; } -/** Warn when running in a development environment */ - -const warn = function emptyFunction() {}; export { useControllableState }; diff --git a/lib-esm/hooks/useMedia.js b/lib-esm/hooks/useMedia.js index 39b91eef58d..98beaeeee00 100644 --- a/lib-esm/hooks/useMedia.js +++ b/lib-esm/hooks/useMedia.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, createContext } from 'react'; +import React, { useContext, useEffect, createContext, useState } from 'react'; import { canUseDOM } from '../utils/environment.js'; /** @@ -77,5 +77,55 @@ function useMedia(mediaQueryString, defaultState) { // be used for development and demo purposes to emulate specific features if // unavailable through devtools const MatchMediaContext = /*#__PURE__*/createContext({}); +const defaultFeatures = {}; +/** + * Use `MatchMedia` to emulate media conditions by passing in feature + * queries to the `features` prop. If a component uses `useMedia` with the + * feature passed in to `MatchMedia` it will force its value to match what is + * provided to `MatchMedia` + * + * This should be used for development and documentation only in situations + * where devtools cannot emulate this feature + * + * @example + * + * + * + */ + +function MatchMedia({ + children, + features = defaultFeatures +}) { + const value = useShallowObject(features); + return /*#__PURE__*/React.createElement(MatchMediaContext.Provider, { + value: value + }, children); +} +MatchMedia.displayName = "MatchMedia"; + +/** + * Utility hook to provide a stable identity for a "simple" object which + * contains only primitive values. This provides a `useMemo`-esque signature + * without dealing with shallow equality checks in the dependency array. + * + * Note (perf): this hook iterates through keys and values of the object if the + * shallow equality check is false each time the hook is called + */ +function useShallowObject(object) { + const [value, setValue] = useState(object); + + if (value !== object) { + const match = Object.keys(object).every(key => { + return object[key] === value[key]; + }); + + if (!match) { + setValue(object); + } + } + + return value; +} -export { useMedia }; +export { MatchMedia, useMedia }; diff --git a/lib-esm/hooks/useResizeObserver.js b/lib-esm/hooks/useResizeObserver.js index 5892a706333..75f79e3ddd2 100644 --- a/lib-esm/hooks/useResizeObserver.js +++ b/lib-esm/hooks/useResizeObserver.js @@ -1,12 +1,12 @@ import { useRef } from 'react'; -import useLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js'; function useResizeObserver(callback, target) { const savedCallback = useRef(callback); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { savedCallback.current = callback; }); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { const targetEl = target && 'current' in target ? target.current : document.documentElement; if (!targetEl) { diff --git a/lib-esm/index.js b/lib-esm/index.js index c6490121a6f..883bd314812 100644 --- a/lib-esm/index.js +++ b/lib-esm/index.js @@ -1,7 +1,6 @@ -export { default as theme } from './theme-preval.js'; export { get as themeGet } from './constants.js'; export { default as BaseStyles } from './BaseStyles.js'; -export { ThemeProvider, useColorSchemeVar, useTheme } from './ThemeProvider.js'; +export { default as ThemeProvider, useColorSchemeVar, useTheme } from './ThemeProvider.js'; export { default as Box } from './Box.js'; export { Button } from './Button/index.js'; export { default as useDetails } from './hooks/useDetails.js'; @@ -63,6 +62,7 @@ export { default as UnderlineNav } from './UnderlineNav.js'; export { default as Checkbox } from './Checkbox.js'; export { default as Textarea } from './Textarea.js'; export { default as sx } from './sx.js'; +export { default as theme } from './theme-preval.js'; export { PageLayout } from './PageLayout/PageLayout.js'; export { AnchoredOverlay } from './AnchoredOverlay/AnchoredOverlay.js'; export { default as Autocomplete } from './Autocomplete/Autocomplete.js'; diff --git a/lib-esm/polyfills/eventListenerSignal.js b/lib-esm/polyfills/eventListenerSignal.js new file mode 100644 index 00000000000..7ec2c8945c8 --- /dev/null +++ b/lib-esm/polyfills/eventListenerSignal.js @@ -0,0 +1,59 @@ +/* + +This file polyfills the following: https://github.com/whatwg/dom/issues/911 +Once all targeted browsers support this DOM feature, this polyfill can be deleted. + +This allows users to pass an AbortSignal to a call to addEventListener as part of the +AddEventListenerOptions object. When the signal is aborted, the event listener is +removed. + +*/ +let signalSupported = false; + +function noop() {} + +try { + const options = Object.create({}, { + signal: { + get() { + signalSupported = true; + } + + } + }); + window.addEventListener('test', noop, options); + window.removeEventListener('test', noop, options); +} catch (e) { + /* */ +} + +function featureSupported() { + return signalSupported; +} + +function monkeyPatch() { + if (typeof window === 'undefined') { + return; + } + + const originalAddEventListener = EventTarget.prototype.addEventListener; + + EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) { + if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) { + originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => { + this.removeEventListener(name, originalCallback, optionsOrCapture); + }); + } + + return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture); + }; +} + +function polyfill() { + if (!featureSupported()) { + monkeyPatch(); + signalSupported = true; + } +} + +export { polyfill }; diff --git a/lib-esm/sx.js b/lib-esm/sx.js index e0edb00ca51..1f076a30ce5 100644 --- a/lib-esm/sx.js +++ b/lib-esm/sx.js @@ -3,4 +3,6 @@ export { default as merge } from 'deepmerge'; const sx = props => css(props.sx); -export { sx as default }; +var sx$1 = sx; + +export { sx$1 as default }; diff --git a/lib-esm/utils/create-slots.js b/lib-esm/utils/create-slots.js index e45a33aa740..91594215244 100644 --- a/lib-esm/utils/create-slots.js +++ b/lib-esm/utils/create-slots.js @@ -1,6 +1,6 @@ import React from 'react'; import { useForceUpdate } from './use-force-update.js'; -import useLayoutEffect from './useIsomorphicLayoutEffect.js'; +import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js'; /** createSlots is a factory that can create a * typesafe Slots + Slot pair to use in a component definition @@ -33,7 +33,7 @@ const createSlots = slotNames => { const rerenderWithSlots = useForceUpdate(); const [isMounted, setIsMounted] = React.useState(false); // fires after all the effects in children - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { rerenderWithSlots(); setIsMounted(true); }, [rerenderWithSlots]); @@ -72,7 +72,7 @@ const createSlots = slotNames => { unregisterSlot, context } = React.useContext(SlotsContext); - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { registerSlot(name, typeof children === 'function' ? children(context) : children); return () => unregisterSlot(name); }, [name, children, registerSlot, unregisterSlot, context]); @@ -85,6 +85,4 @@ const createSlots = slotNames => { }; }; -var createSlots$1 = createSlots; - -export { createSlots$1 as default }; +export { createSlots as default }; diff --git a/lib-esm/utils/deprecate.js b/lib-esm/utils/deprecate.js new file mode 100644 index 00000000000..b6d052b59c6 --- /dev/null +++ b/lib-esm/utils/deprecate.js @@ -0,0 +1,55 @@ +import 'react'; + +const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports + + +let deprecate = noop; + +let useDeprecation = null; + +{ + useDeprecation = () => { + return noop; + }; +} +class Deprecations { + static instance = null; + + static get() { + if (!Deprecations.instance) { + Deprecations.instance = new Deprecations(); + } + + return Deprecations.instance; + } + + constructor() { + this.deprecations = []; + } + + static deprecate({ + name, + message, + version + }) { + const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`; // eslint-disable-next-line no-console + + console.warn(msg); + this.get().deprecations.push({ + name, + message, + version + }); + } + + static getDeprecations() { + return this.get().deprecations; + } + + static clearDeprecations() { + this.get().deprecations.length = 0; + } + +} + +export { Deprecations, deprecate, useDeprecation }; diff --git a/lib-esm/utils/polymorphic.js b/lib-esm/utils/polymorphic.js new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/lib-esm/utils/polymorphic.js @@ -0,0 +1 @@ + diff --git a/lib-esm/utils/ssr.js b/lib-esm/utils/ssr.js new file mode 100644 index 00000000000..ec1a73776e3 --- /dev/null +++ b/lib-esm/utils/ssr.js @@ -0,0 +1 @@ +export { SSRProvider, useSSRSafeId } from '@react-aria/ssr'; diff --git a/lib-esm/utils/story-helpers.js b/lib-esm/utils/story-helpers.js new file mode 100644 index 00000000000..8672a3bc550 --- /dev/null +++ b/lib-esm/utils/story-helpers.js @@ -0,0 +1,278 @@ +import React from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { get } from '../constants.js'; +import theme from '../theme-preval.js'; +import Box from '../Box.js'; +import ThemeProvider from '../ThemeProvider.js'; +import BaseStyles from '../BaseStyles.js'; + +// set global theme styles for each story +const GlobalStyle = createGlobalStyle(["body{background-color:", ";color:", ";}"], get('colors.canvas.default'), get('colors.fg.default')); // only remove padding for multi-theme view grid + +const GlobalStyleMultiTheme = createGlobalStyle(["body{padding:0 !important;}"]); +const withThemeProvider = (Story, context) => { + // used for testing ThemeProvider.stories.tsx + if (context.parameters.disableThemeDecorator) return /*#__PURE__*/React.createElement(Story, context); + const { + colorScheme + } = context.globals; + + if (colorScheme === 'all') { + return /*#__PURE__*/React.createElement(Box, { + sx: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))', + height: '100vh' + } + }, /*#__PURE__*/React.createElement(GlobalStyleMultiTheme, null), Object.keys(theme.colorSchemes).map(scheme => /*#__PURE__*/React.createElement(ThemeProvider, { + key: scheme, + colorMode: "day", + dayScheme: scheme + }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, { + sx: { + padding: '1rem', + height: '100%', + backgroundColor: 'canvas.default', + color: 'fg.default' + } + }, /*#__PURE__*/React.createElement("div", { + id: `html-addon-root-${scheme}` + }, /*#__PURE__*/React.createElement(Story, context))))))); + } + + return /*#__PURE__*/React.createElement(ThemeProvider, { + colorMode: "day", + dayScheme: colorScheme + }, /*#__PURE__*/React.createElement(GlobalStyle, null), /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement("div", { + id: "html-addon-root" + }, /*#__PURE__*/React.createElement(Story, context)))); +}; +withThemeProvider.displayName = "withThemeProvider"; +const toolbarTypes = { + colorScheme: { + name: 'Color scheme', + description: 'Switch color scheme', + defaultValue: 'light', + toolbar: { + icon: 'photo', + items: [...Object.keys(theme.colorSchemes), 'all'], + showName: true + } + } +}; +const inputWrapperArgTypes = { + block: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + contrast: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + placeholder: { + defaultValue: '', + control: { + type: 'text' + } + }, + size: { + name: 'size (input)', + // TODO: remove '(input)' + defaultValue: 'medium', + options: ['small', 'medium', 'large'], + control: { + type: 'radio' + } + }, + validationStatus: { + defaultValue: undefined, + options: ['error', 'success', 'warning', undefined], + control: { + type: 'radio' + } + } +}; +const textInputArgTypesUnsorted = { ...inputWrapperArgTypes, + loading: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + loaderPosition: { + defaultValue: 'auto', + options: ['auto', 'leading', 'trailing'], + control: { + type: 'radio' + } + }, + monospace: { + defaultValue: false, + control: { + type: 'boolean' + } + } +}; // Alphabetize and optionally categorize the props + +const getTextInputArgTypes = category => Object.keys(textInputArgTypesUnsorted).sort().reduce((obj, key) => { + obj[key] = category ? { // have to do weird type casting so we can spread the object + ...textInputArgTypesUnsorted[key], + table: { + category + } + } : textInputArgTypesUnsorted[key]; + return obj; +}, {}); +const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'sx', 'trailingVisual', 'trailingAction']; +const textInputWithTokensArgTypes = { + hideTokenRemoveButtons: { + defaultValue: false, + type: 'boolean', + table: { + category: 'TextInputWithTokens props' + } + }, + maxHeight: { + type: 'string', + defaultValue: 'none', + description: 'Any valid value for the CSS max-height property', + table: { + category: 'TextInputWithTokens props' + } + }, + preventTokenWrapping: { + defaultValue: false, + type: 'boolean', + table: { + category: 'TextInputWithTokens props' + } + }, + size: { + name: 'size (token size)', + defaultValue: 'xlarge', + options: ['small', 'medium', 'large', 'xlarge'], + control: { + type: 'radio' + }, + table: { + category: 'TextInputWithTokens props' + } + }, + visibleTokenCount: { + defaultValue: 999, + type: 'number', + table: { + category: 'TextInputWithTokens props' + } + } +}; +const formControlArgTypes = { + // FormControl + required: { + defaultValue: false, + control: { + type: 'boolean' + }, + table: { + category: 'FormControl' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + }, + table: { + category: 'FormControl' + } + }, + // FormControl.Label + labelChildren: { + name: 'children', + type: 'string', + defaultValue: 'Label', + table: { + category: 'FormControl.Label' + } + }, + visuallyHidden: { + defaultValue: false, + type: 'boolean', + table: { + category: 'FormControl.Label' + } + }, + // FormControl.Caption + captionChildren: { + name: 'children', + type: 'string', + defaultValue: '', + table: { + category: 'FormControl.Caption' + } + }, + // FormControl.Validation + validationChildren: { + name: 'children', + type: 'string', + defaultValue: '', + table: { + category: 'FormControl.Validation' + } + }, + variant: { + defaultValue: 'error', + control: { + type: 'radio', + options: ['error', 'success', 'warning'] + }, + table: { + category: 'FormControl.Validation' + } + } +}; +const formControlArgTypeKeys = Object.keys(formControlArgTypes); +const formControlArgTypesWithoutValidation = formControlArgTypeKeys.reduce((acc, key) => { + if (formControlArgTypes[key].table.category !== 'FormControl.Validation') { + acc[key] = formControlArgTypes[key]; + } + + return acc; +}, {}); +const getFormControlArgsByChildComponent = ({ + captionChildren, + disabled, + labelChildren, + required, + validationChildren, + variant, + visuallyHidden +}) => ({ + parentArgs: { + disabled, + required + }, + labelArgs: { + visuallyHidden, + children: labelChildren + }, + captionArgs: { + children: captionChildren + }, + validationArgs: { + children: validationChildren, + variant + } +}); + +export { formControlArgTypes, formControlArgTypesWithoutValidation, getFormControlArgsByChildComponent, getTextInputArgTypes, inputWrapperArgTypes, textInputExcludedControlKeys, textInputWithTokensArgTypes, toolbarTypes, withThemeProvider }; diff --git a/lib-esm/utils/test-deprecations.js b/lib-esm/utils/test-deprecations.js new file mode 100644 index 00000000000..67842f74f3a --- /dev/null +++ b/lib-esm/utils/test-deprecations.js @@ -0,0 +1,17 @@ +import semver from 'semver'; +import { Deprecations } from './deprecate.js'; + +const ourVersion = require('../../package.json').version; + +beforeEach(() => { + Deprecations.clearDeprecations(); +}); +afterEach(() => { + const deprecations = Deprecations.getDeprecations(); + + for (const dep of deprecations) { + if (semver.gte(ourVersion, dep.version)) { + throw new Error(`Found a deprecation that should be removed in ${dep.version}`); + } + } +}); diff --git a/lib-esm/utils/test-matchers.js b/lib-esm/utils/test-matchers.js new file mode 100644 index 00000000000..ae995e56e1e --- /dev/null +++ b/lib-esm/utils/test-matchers.js @@ -0,0 +1,112 @@ +import '@testing-library/jest-dom'; +import 'jest-styled-components'; +import { styleSheetSerializer } from 'jest-styled-components/serializer'; +import React from 'react'; +import { getClasses, render, getComputedStyles } from './testing.js'; + +expect.addSnapshotSerializer(styleSheetSerializer); + +const stringify = d => JSON.stringify(d, null, ' '); + +expect.extend({ + toMatchKeys(obj, values) { + return { + pass: Object.keys(values).every(key => this.equals(obj[key], values[key])), + message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}` + }; + }, + + toHaveClass(node, klass) { + const classes = getClasses(node); + const pass = classes.includes(klass); + return { + pass, + message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}` + }; + }, + + toHaveClasses(node, klasses, only = false) { + const classes = getClasses(node); + const pass = only ? this.equals(classes.sort(), klasses.sort()) : klasses.every(klass => classes.includes(klass)); + return { + pass, + message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}` + }; + }, + + toImplementSxBehavior(element) { + const mediaKey = '@media (max-width:123px)'; + const sxPropValue = { + [mediaKey]: { + color: 'red.5' + } + }; + const elem = /*#__PURE__*/React.cloneElement(element, { + sx: sxPropValue + }); + + function checkStylesDeep(rendered) { + const className = rendered.props.className; + const styles = getComputedStyles(className); + const mediaStyles = styles[mediaKey]; + + if (mediaStyles && mediaStyles.color) { + return true; + } else if (rendered.children) { + return rendered.children.some(child => checkStylesDeep(child)); + } else { + return false; + } + } + + return { + pass: checkStylesDeep(render(elem)), + message: () => 'sx prop values did not change styles of component nor of any sub-components' + }; + }, + + toSetExports(mod, expectedExports) { + if (!Object.keys(expectedExports).includes('default')) { + return { + pass: false, + message: () => "You must specify the module's default export" + }; + } + + const seen = new Set(); + + for (const exp of Object.keys(expectedExports)) { + seen.add(exp); + + if (mod[exp] !== expectedExports[exp]) { + if (!mod[exp] && !expectedExports[exp]) { + continue; + } + + return { + pass: false, + message: () => `Module exported a different value from key '${exp}' than expected` + }; + } + } + + for (const exp of Object.keys(mod)) { + if (seen.has(exp)) { + continue; + } + + if (mod[exp] !== expectedExports[exp]) { + return { + pass: false, + message: () => `Module exported an unexpected value from key '${exp}'` + }; + } + } + + return { + pass: true, + message: () => '' + }; + } + +}); diff --git a/lib-esm/utils/testing.js b/lib-esm/utils/testing.js new file mode 100644 index 00000000000..9858cc6f477 --- /dev/null +++ b/lib-esm/utils/testing.js @@ -0,0 +1,250 @@ +import React from 'react'; +import { promisify } from 'util'; +import renderer from 'react-test-renderer'; +import enzyme from 'enzyme'; +import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import { render as render$1 } from '@testing-library/react'; +import { toHaveNoViolations, axe } from 'jest-axe'; +import theme from '../theme-preval.js'; +import ThemeProvider from '../ThemeProvider.js'; + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const readFile = promisify(require('fs').readFile); +const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/; +enzyme.configure({ + adapter: new Adapter() +}); +function mount(component) { + return enzyme.mount(component); +} + +/** + * Render the component (a React.createElement() or JSX expression) + * into its intermediate object representation with 'type', + * 'props', and 'children' keys + * + * The returned object can be matched with expect().toEqual(), e.g. + * + * ```js + * expect(render()).toEqual(render(
)) + * ``` + */ +function render(component, theme$1 = theme) { + return renderer.create( /*#__PURE__*/React.createElement(ThemeProvider, { + theme: theme$1 + }, component)).toJSON(); +} +/** + * Render the component (a React.createElement() or JSX expression) + * using react-test-renderer and return the root node + * ``` + */ + +function renderRoot(component) { + return renderer.create(component).root; +} +/** + * Get the HTML class names rendered by the component instance + * as an array. + * + * ```js + * expect(renderClasses(
)) + * .toEqual(['a', 'b']) + * ``` + */ + +function renderClasses(component) { + const { + props: { + className + } + } = render(component); + return className ? className.trim().split(' ') : []; +} +/** + * Returns true if a node renders with a single class. + */ + +function rendersClass(node, klass) { + return renderClasses(node).includes(klass); +} +function px(value) { + return typeof value === 'number' ? `${value}px` : value; +} +function percent(value) { + return typeof value === 'number' ? `${value}%` : value; +} +function renderStyles(node) { + const { + props: { + className + } + } = render(node); + return getComputedStyles(className); +} +function getComputedStyles(className) { + const div = document.createElement('div'); + div.className = className; + const computed = {}; + + for (const sheet of document.styleSheets) { + // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule + for (const rule of sheet.cssRules) { + if (rule instanceof CSSMediaRule) { + readMedia(rule); + } else if (rule instanceof CSSStyleRule) { + readRule(rule, computed); + } else ; + } + } + + return computed; + + function matchesSafe(node, selector) { + if (!selector) { + return false; + } + + try { + return node.matches(selector); + } catch (error) { + return false; + } + } + + function readRule(rule, dest) { + if (matchesSafe(div, rule.selectorText)) { + const { + style + } = rule; + + for (let i = 0; i < style.length; i++) { + const prop = style[i]; + dest[prop] = style.getPropertyValue(prop); + } + } + } + + function readMedia(mediaRule) { + const key = `@media ${mediaRule.media[0]}`; // const dest = computed[key] || (computed[key] = {}) + + const dest = {}; + + for (const rule of mediaRule.cssRules) { + if (rule instanceof CSSStyleRule) { + readRule(rule, dest); + } + } // Don't add media rule to computed styles + // if no styles were actually applied + + + if (Object.keys(dest).length > 0) { + computed[key] = dest; + } + } +} +/** + * This provides a layer of compatibility between the render() function from + * react-test-renderer and Enzyme's mount() + */ + +function getProps(node) { + return typeof node.props === 'function' ? node.props() : node.props; +} +function getClassName(node) { + return getProps(node).className; +} +function getClasses(node) { + const className = getClassName(node); + return className ? className.trim().split(/ +/) : []; +} +async function loadCSS(path) { + const css = await readFile(require.resolve(path), 'utf8'); + const style = document.createElement('style'); + style.setAttribute('data-path', path); + style.textContent = css; + document.head.appendChild(style); + return style; +} +function unloadCSS(path) { + const style = document.querySelector(`style[data-path="${path}"]`); + + if (style) { + style.remove(); + return true; + } +} // If a component requires certain props or other conditions in order +// to render without errors, you can pass a `toRender` function that +// returns an element ready to be rendered. + +function behavesAsComponent({ + Component, + toRender, + options +}) { + options = options || {}; + + const getElement = () => toRender ? toRender() : /*#__PURE__*/React.createElement(Component, null); + + if (!options.skipSx) { + it('implements sx prop behavior', () => { + expect(getElement()).toImplementSxBehavior(); + }); + } + + if (!options.skipAs) { + it('respects the as prop', () => { + const As = /*#__PURE__*/React.forwardRef((_props, ref) => /*#__PURE__*/React.createElement("div", { + className: "as-component", + ref: ref + })); + const elem = /*#__PURE__*/React.cloneElement(getElement(), { + as: As + }); + expect(render(elem)).toEqual(render( /*#__PURE__*/React.createElement(As, null))); + }); + } + + it('sets a valid displayName', () => { + expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX); + }); + it('renders consistently', () => { + expect(render(getElement())).toMatchSnapshot(); + }); +} // eslint-disable-next-line @typescript-eslint/no-explicit-any + +function checkExports(path, exports) { + it('has declared exports', () => { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const mod = require(`../${path}`); + + expect(mod).toSetExports(exports); + }); +} +expect.extend(toHaveNoViolations); +function checkStoriesForAxeViolations(name, storyDir) { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const stories = require(`${storyDir || '../stories/'}${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta + + + const { + default: _meta, + ...Stories + } = stories; + Object.values(Stories).map(Story => { + if (typeof Story !== 'function') return; + const { + storyName, + name: StoryFunctionName + } = Story; + it(`story ${storyName || StoryFunctionName} should have no axe violations`, async () => { + const { + container + } = render$1( /*#__PURE__*/React.createElement(Story, null)); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + }); +} + +export { COMPONENT_DISPLAY_NAME_REGEX, behavesAsComponent, checkExports, checkStoriesForAxeViolations, getClassName, getClasses, getComputedStyles, getProps, loadCSS, mount, percent, px, render, renderClasses, renderRoot, renderStyles, rendersClass, unloadCSS }; diff --git a/lib-esm/utils/theme.js b/lib-esm/utils/theme.js new file mode 100644 index 00000000000..dc6f0a5227d --- /dev/null +++ b/lib-esm/utils/theme.js @@ -0,0 +1 @@ +export { default } from './theme2.js'; diff --git a/lib-esm/utils/theme2.js b/lib-esm/utils/theme2.js new file mode 100644 index 00000000000..cdbfb3b93fe --- /dev/null +++ b/lib-esm/utils/theme2.js @@ -0,0 +1,72 @@ +import require$$0 from 'lodash.isempty'; +import require$$1 from 'lodash.isobject'; +import require$$2 from 'chroma-js'; + +// Utility functions used in theme-preval.js +// This file needs to be a JavaScript file using CommonJS to be compatible with preval +const isEmpty = require$$0; + +const isObject = require$$1; + +const chroma = require$$2; + +function fontStack(fonts) { + return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', '); +} // The following functions are a temporary measure for splitting shadow values out from the colors object. +// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation +// will not be needed. + + +function isShadowValue(value) { + return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value); +} + +function isColorValue(value) { + return chroma.valid(value); +} + +function filterObject(obj, predicate) { + if (Array.isArray(obj)) { + return obj.filter(predicate); + } + + return Object.entries(obj).reduce((acc, [key, value]) => { + if (isObject(value)) { + const result = filterObject(value, predicate); // Don't include empty objects or arrays + + if (!isEmpty(result)) { + acc[key] = result; + } + } else if (predicate(value)) { + acc[key] = value; + } + + return acc; + }, {}); +} + +function partitionColors(colors) { + return { + colors: filterObject(colors, value => isColorValue(value)), + shadows: filterObject(colors, value => isShadowValue(value)) + }; +} + +function omitScale(obj) { + const { + scale, + ...rest + } = obj; + return rest; +} + +var theme = { + fontStack, + isShadowValue, + isColorValue, + filterObject, + partitionColors, + omitScale +}; + +export { theme as default }; diff --git a/lib-esm/utils/useIsomorphicLayoutEffect.js b/lib-esm/utils/useIsomorphicLayoutEffect.js index 38d69bc45c7..a7ff9c74b06 100644 --- a/lib-esm/utils/useIsomorphicLayoutEffect.js +++ b/lib-esm/utils/useIsomorphicLayoutEffect.js @@ -1,6 +1,5 @@ -import { useLayoutEffect as useLayoutEffect$1, useEffect } from 'react'; +import { useLayoutEffect, useEffect } from 'react'; -const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect$1 : useEffect; -var useLayoutEffect = useIsomorphicLayoutEffect; +const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect; -export { useLayoutEffect as default }; +export { useIsomorphicLayoutEffect as default }; diff --git a/lib/ActionList/Description.js b/lib/ActionList/Description.js index 657dc0d39bc..c9fda0e416a 100644 --- a/lib/ActionList/Description.js +++ b/lib/ActionList/Description.js @@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var Truncate = require('../Truncate.js'); var shared = require('./shared.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/Divider.js b/lib/ActionList/Divider.js index d51551f15ae..3e59334c707 100644 --- a/lib/ActionList/Divider.js +++ b/lib/ActionList/Divider.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); var constants = require('../constants.js'); -require('@styled-system/css'); +require('../sx.js'); var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/LinkItem.js b/lib/ActionList/LinkItem.js index 42e4865d0ac..e4b2ba96f61 100644 --- a/lib/ActionList/LinkItem.js +++ b/lib/ActionList/LinkItem.js @@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Link = require('../Link.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var Item = require('./Item.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionList/Visuals.js b/lib/ActionList/Visuals.js index 4675f3f4649..4ecbf9ef8be 100644 --- a/lib/ActionList/Visuals.js +++ b/lib/ActionList/Visuals.js @@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var constants = require('../constants.js'); var shared = require('./shared.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ActionMenu.js b/lib/ActionMenu.js index 103275383d8..c4770f152a4 100644 --- a/lib/ActionMenu.js +++ b/lib/ActionMenu.js @@ -8,12 +8,12 @@ var octiconsReact = require('@primer/octicons-react'); var Divider = require('./ActionList/Divider.js'); var ActionListContainerContext = require('./ActionList/ActionListContainerContext.js'); var index = require('./Button/index.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('./sx.js'); var useProvidedStateOrCreate = require('./hooks/useProvidedStateOrCreate.js'); var useProvidedRefOrCreate = require('./hooks/useProvidedRefOrCreate.js'); var useMenuKeyboardNavigation = require('./hooks/useMenuKeyboardNavigation.js'); var AnchoredOverlay = require('./AnchoredOverlay/AnchoredOverlay.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Avatar.js b/lib/Avatar.js index f12043343c7..353a6e4e443 100644 --- a/lib/Avatar.js +++ b/lib/Avatar.js @@ -31,5 +31,6 @@ Avatar.defaultProps = { alt: '', square: false }; +var Avatar$1 = Avatar; -module.exports = Avatar; +module.exports = Avatar$1; diff --git a/lib/AvatarPair.js b/lib/AvatarPair.js index ef6e5802f63..1d73f86d90e 100644 --- a/lib/AvatarPair.js +++ b/lib/AvatarPair.js @@ -40,5 +40,6 @@ const AvatarPair = ({ AvatarPair.displayName = "AvatarPair"; // styled() changes this AvatarPair.displayName = 'AvatarPair'; +var AvatarPair$1 = AvatarPair; -module.exports = AvatarPair; +module.exports = AvatarPair$1; diff --git a/lib/AvatarStack.js b/lib/AvatarStack.js index cdb7e8319ba..e6dba67f675 100644 --- a/lib/AvatarStack.js +++ b/lib/AvatarStack.js @@ -51,5 +51,6 @@ const AvatarStack = ({ }; AvatarStack.displayName = "AvatarStack"; +var AvatarStack$1 = AvatarStack; -module.exports = AvatarStack; +module.exports = AvatarStack$1; diff --git a/lib/Box.js b/lib/Box.js index 0e6bd973bb3..f088329c6a7 100644 --- a/lib/Box.js +++ b/lib/Box.js @@ -12,5 +12,6 @@ const Box = styled__default["default"].div.withConfig({ displayName: "Box", componentId: "sc-1gh2r6s-0" })(styledSystem.space, styledSystem.color, styledSystem.typography, styledSystem.layout, styledSystem.flexbox, styledSystem.grid, styledSystem.background, styledSystem.border, styledSystem.position, styledSystem.shadow, sx["default"]); +var Box$1 = Box; -module.exports = Box; +module.exports = Box$1; diff --git a/lib/BranchName.js b/lib/BranchName.js index eef7660baf9..d5fe4170730 100644 --- a/lib/BranchName.js +++ b/lib/BranchName.js @@ -12,5 +12,6 @@ const BranchName = styled__default["default"].a.withConfig({ displayName: "BranchName", componentId: "sc-lduqme-0" })(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";text-decoration:none;", ";"], constants.get('fontSizes.0'), constants.get('fonts.mono'), constants.get('colors.accent.fg'), constants.get('colors.accent.subtle'), constants.get('radii.2'), sx["default"]); +var BranchName$1 = BranchName; -module.exports = BranchName; +module.exports = BranchName$1; diff --git a/lib/Button/ButtonBase.js b/lib/Button/ButtonBase.js index aaae25b4e76..e514fd94d22 100644 --- a/lib/Button/ButtonBase.js +++ b/lib/Button/ButtonBase.js @@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var ThemeProvider = require('../ThemeProvider.js'); var types = require('./types.js'); var styles = require('./styles.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Button/IconButton.js b/lib/Button/IconButton.js index 2a0da94d20c..2846d375531 100644 --- a/lib/Button/IconButton.js +++ b/lib/Button/IconButton.js @@ -3,12 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var ThemeProvider = require('../ThemeProvider.js'); var Box = require('../Box.js'); var types = require('./types.js'); var styles = require('./styles.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Button/LinkButton.js b/lib/Button/LinkButton.js index 0fef13accc7..f230adac899 100644 --- a/lib/Button/LinkButton.js +++ b/lib/Button/LinkButton.js @@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var ButtonBase = require('./ButtonBase.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/ButtonGroup.js b/lib/ButtonGroup.js index df2ca9c71a7..eb982747fcb 100644 --- a/lib/ButtonGroup.js +++ b/lib/ButtonGroup.js @@ -12,5 +12,6 @@ const ButtonGroup = styled__default["default"].div.withConfig({ displayName: "ButtonGroup", componentId: "sc-tk435v-0" })(["display:inline-flex;vertical-align:middle;&& > *{position:relative;border-right-width:0;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";margin-right:0;}:not(:first-child){margin-left:0;margin-right:0;}:last-child{border-right-width:1px;border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{border-right-width:1px;+ *{border-left-width:0;}}:focus,:active{z-index:1;}}", ";"], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx["default"]); +var ButtonGroup$1 = ButtonGroup; -module.exports = ButtonGroup; +module.exports = ButtonGroup$1; diff --git a/lib/Checkbox.js b/lib/Checkbox.js index c4bdf8156b9..140c2984362 100644 --- a/lib/Checkbox.js +++ b/lib/Checkbox.js @@ -63,5 +63,6 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest)); }); Checkbox.displayName = 'Checkbox'; +var Checkbox$1 = Checkbox; -module.exports = Checkbox; +module.exports = Checkbox$1; diff --git a/lib/CounterLabel.js b/lib/CounterLabel.js index 5f6098662ae..1f060f931e0 100644 --- a/lib/CounterLabel.js +++ b/lib/CounterLabel.js @@ -30,5 +30,6 @@ const CounterLabel = styled__default["default"].span.withConfig({ displayName: "CounterLabel", componentId: "sc-13ceqbg-0" })(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], constants.get('fontSizes.0'), constants.get('fontWeights.bold'), constants.get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx["default"]); +var CounterLabel$1 = CounterLabel; -module.exports = CounterLabel; +module.exports = CounterLabel$1; diff --git a/lib/Details.js b/lib/Details.js index ba3be1f003f..3b2149fa0d4 100644 --- a/lib/Details.js +++ b/lib/Details.js @@ -12,5 +12,6 @@ const Details = styled__default["default"].details.withConfig({ componentId: "sc-1qhvasm-0" })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", ";"], sx["default"]); Details.displayName = 'Details'; +var Details$1 = Details; -module.exports = Details; +module.exports = Details$1; diff --git a/lib/DropdownStyles.js b/lib/DropdownStyles.js index 94488df4be8..5f25c5e0fd1 100644 --- a/lib/DropdownStyles.js +++ b/lib/DropdownStyles.js @@ -126,4 +126,6 @@ const getDirectionStyles = (theme, direction) => { return map[direction]; }; -module.exports = getDirectionStyles; +var getDirectionStyles$1 = getDirectionStyles; + +module.exports = getDirectionStyles$1; diff --git a/lib/FilteredSearch.js b/lib/FilteredSearch.js index ef421a6f33e..b2905a6ab8f 100644 --- a/lib/FilteredSearch.js +++ b/lib/FilteredSearch.js @@ -12,5 +12,6 @@ const FilteredSearch = styled__default["default"].div.withConfig({ displayName: "FilteredSearch", componentId: "sc-1q2r5fr-0" })(["display:flex;align-items:stretch;summary,> button{border-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";border-right:0;}.TextInput-wrapper{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}", ""], constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), constants.get('radii.2'), sx["default"]); +var FilteredSearch$1 = FilteredSearch; -module.exports = FilteredSearch; +module.exports = FilteredSearch$1; diff --git a/lib/Flash.js b/lib/Flash.js index 85f13bb9189..33ff7b38812 100644 --- a/lib/Flash.js +++ b/lib/Flash.js @@ -52,5 +52,6 @@ const Flash = styled__default["default"].div.withConfig({ Flash.defaultProps = { variant: 'default' }; +var Flash$1 = Flash; -module.exports = Flash; +module.exports = Flash$1; diff --git a/lib/Heading.js b/lib/Heading.js index 82cecee7b14..00ed431db0b 100644 --- a/lib/Heading.js +++ b/lib/Heading.js @@ -12,5 +12,6 @@ const Heading = styled__default["default"].h2.withConfig({ displayName: "Heading", componentId: "sc-1irtotl-0" })(["font-weight:", ";font-size:", ";margin:0;", ";"], constants.get('fontWeights.bold'), constants.get('fontSizes.5'), sx["default"]); +var Heading$1 = Heading; -module.exports = Heading; +module.exports = Heading$1; diff --git a/lib/Label.js b/lib/Label.js index ea088048f8d..b047a7d807c 100644 --- a/lib/Label.js +++ b/lib/Label.js @@ -76,6 +76,7 @@ Label.defaultProps = { size: 'small', variant: 'default' }; +var Label$1 = Label; -exports["default"] = Label; +exports["default"] = Label$1; exports.variants = variants; diff --git a/lib/LabelGroup.js b/lib/LabelGroup.js index 6f9eb605192..897df744f10 100644 --- a/lib/LabelGroup.js +++ b/lib/LabelGroup.js @@ -12,5 +12,6 @@ const LabelGroup = styled__default["default"].span.withConfig({ displayName: "LabelGroup", componentId: "sc-1a0k7wh-0" })(["& *{margin-right:", ";}& *:last-child{margin-right:0;}", ";"], constants.get('space.1'), sx["default"]); +var LabelGroup$1 = LabelGroup; -module.exports = LabelGroup; +module.exports = LabelGroup$1; diff --git a/lib/Link.js b/lib/Link.js index 0efd6e3b73d..ec943d5d26c 100644 --- a/lib/Link.js +++ b/lib/Link.js @@ -19,5 +19,6 @@ const Link = styled__default["default"].a.withConfig({ displayName: "Link", componentId: "sc-hrxz1n-0" })(["color:", ";text-decoration:", ";&:hover{text-decoration:", ";", ";}&:is(button){display:inline-block;padding:0;font-size:inherit;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;}", ";"], props => props.muted ? constants.get('colors.fg.muted')(props) : constants.get('colors.accent.fg')(props), props => props.underline ? 'underline' : 'none', props => props.muted ? 'none' : 'underline', props => props.hoverColor ? hoverColor : props.muted ? `color: ${constants.get('colors.accent.fg')(props)}` : '', sx["default"]); +var Link$1 = Link; -module.exports = Link; +module.exports = Link$1; diff --git a/lib/Overlay.js b/lib/Overlay.js index e579c9eec49..42741009f5c 100644 --- a/lib/Overlay.js +++ b/lib/Overlay.js @@ -164,5 +164,6 @@ Overlay.defaultProps = { height: 'auto', width: 'auto' }; +var Overlay$1 = Overlay; -module.exports = Overlay; +module.exports = Overlay$1; diff --git a/lib/PageLayout/PageLayout.js b/lib/PageLayout/PageLayout.js index 328346cbab5..147ef136b33 100644 --- a/lib/PageLayout/PageLayout.js +++ b/lib/PageLayout/PageLayout.js @@ -6,7 +6,7 @@ var React = require('react'); var useStickyPaneHeight = require('./useStickyPaneHeight.js'); var Box = require('../Box.js'); var useResponsiveValue = require('../hooks/useResponsiveValue.js'); -require('@styled-system/css'); +require('../sx.js'); var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Pagehead.js b/lib/Pagehead.js index 78e3307b11d..264cbe13075 100644 --- a/lib/Pagehead.js +++ b/lib/Pagehead.js @@ -12,5 +12,6 @@ const Pagehead = styled__default["default"].div.withConfig({ displayName: "Pagehead", componentId: "sc-17d52hr-0" })(["position:relative;padding-top:", ";padding-bottom:", ";margin-bottom:", ";border-bottom:1px solid ", ";", ";"], constants.get('space.4'), constants.get('space.4'), constants.get('space.4'), constants.get('colors.border.default'), sx["default"]); +var Pagehead$1 = Pagehead; -module.exports = Pagehead; +module.exports = Pagehead$1; diff --git a/lib/Placeholder.js b/lib/Placeholder.js deleted file mode 100644 index cb4bcd40af8..00000000000 --- a/lib/Placeholder.js +++ /dev/null @@ -1,36 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -var React = require('react'); -var Box = require('./Box.js'); - -function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } - -var React__default = /*#__PURE__*/_interopDefaultLegacy(React); - -/** Private component used to render placeholders in storybook and documentation examples */ - -const Placeholder = ({ - width, - height, - id, - label -}) => { - return /*#__PURE__*/React__default["default"].createElement(Box, { - id: id, - sx: { - width: width !== null && width !== void 0 ? width : '100%', - height, - display: 'grid', - placeItems: 'center', - bg: 'canvas.inset', - borderRadius: 2, - border: '1px solid', - borderColor: 'border.subtle' - } - }, label); -}; -Placeholder.displayName = "Placeholder"; - -exports.Placeholder = Placeholder; diff --git a/lib/Radio.js b/lib/Radio.js index a1b2cf0708f..cdcc2e7ebf8 100644 --- a/lib/Radio.js +++ b/lib/Radio.js @@ -62,5 +62,6 @@ const Radio = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest)); }); Radio.displayName = 'Radio'; +var Radio$1 = Radio; -module.exports = Radio; +module.exports = Radio$1; diff --git a/lib/Spinner.js b/lib/Spinner.js index fc029f86bf4..1b267c2cf94 100644 --- a/lib/Spinner.js +++ b/lib/Spinner.js @@ -49,5 +49,6 @@ const StyledSpinner = styled__default["default"](Spinner).withConfig({ componentId: "sc-1dxfx1i-0" })(["@keyframes rotate-keyframes{100%{transform:rotate(360deg);}}animation:rotate-keyframes 1s linear infinite;", ""], sx["default"]); StyledSpinner.displayName = 'Spinner'; +var Spinner$1 = StyledSpinner; -module.exports = StyledSpinner; +module.exports = Spinner$1; diff --git a/lib/StyledOcticon.js b/lib/StyledOcticon.js index 79975d38898..b15b9b84408 100644 --- a/lib/StyledOcticon.js +++ b/lib/StyledOcticon.js @@ -32,5 +32,6 @@ const StyledOcticon = styled__default["default"](Octicon).withConfig({ StyledOcticon.defaultProps = { size: 16 }; +var StyledOcticon$1 = StyledOcticon; -module.exports = StyledOcticon; +module.exports = StyledOcticon$1; diff --git a/lib/Text.js b/lib/Text.js index 8d60236c023..0e5d1001bcb 100644 --- a/lib/Text.js +++ b/lib/Text.js @@ -12,5 +12,6 @@ const Text = styled__default["default"].span.withConfig({ displayName: "Text", componentId: "sc-125xb1i-0" })(["", ";", ";", ";"], constants.TYPOGRAPHY, constants.COMMON, sx["default"]); +var Text$1 = Text; -module.exports = Text; +module.exports = Text$1; diff --git a/lib/TextInputWithTokens.js b/lib/TextInputWithTokens.js index 31aa6f26c56..216ef80a6e0 100644 --- a/lib/TextInputWithTokens.js +++ b/lib/TextInputWithTokens.js @@ -326,5 +326,6 @@ TextInputWithTokens.defaultProps = { loaderPosition: 'auto' }; TextInputWithTokens.displayName = 'TextInputWithTokens'; +var TextInputWithTokens$1 = TextInputWithTokens; -module.exports = TextInputWithTokens; +module.exports = TextInputWithTokens$1; diff --git a/lib/Textarea.js b/lib/Textarea.js index 6a53af3fffc..79d05dd61f7 100644 --- a/lib/Textarea.js +++ b/lib/Textarea.js @@ -55,8 +55,9 @@ const Textarea = /*#__PURE__*/React__default["default"].forwardRef(({ }, rest))); }); Textarea.displayName = 'Textarea'; +var Textarea$1 = Textarea; exports.DEFAULT_TEXTAREA_COLS = DEFAULT_TEXTAREA_COLS; exports.DEFAULT_TEXTAREA_RESIZE = DEFAULT_TEXTAREA_RESIZE; exports.DEFAULT_TEXTAREA_ROWS = DEFAULT_TEXTAREA_ROWS; -exports["default"] = Textarea; +exports["default"] = Textarea$1; diff --git a/lib/ThemeProvider.js b/lib/ThemeProvider.js index 9ec8b0da450..5ddcaa637c9 100644 --- a/lib/ThemeProvider.js +++ b/lib/ThemeProvider.js @@ -226,7 +226,9 @@ function applyColorScheme(theme, colorScheme) { }; } +var ThemeProvider$1 = ThemeProvider; + exports.ThemeProvider = ThemeProvider; -exports["default"] = ThemeProvider; +exports["default"] = ThemeProvider$1; exports.useColorSchemeVar = useColorSchemeVar; exports.useTheme = useTheme; diff --git a/lib/ToggleSwitch.js b/lib/ToggleSwitch.js index 7c2f5be2084..a1dc3480657 100644 --- a/lib/ToggleSwitch.js +++ b/lib/ToggleSwitch.js @@ -193,5 +193,6 @@ Switch.defaultProps = { statusLabelPosition: 'start', size: 'medium' }; +var Switch$1 = Switch; -module.exports = Switch; +module.exports = Switch$1; diff --git a/lib/Token/Token.js b/lib/Token/Token.js index 2cbf09e91fa..a3eaaf060ee 100644 --- a/lib/Token/Token.js +++ b/lib/Token/Token.js @@ -2,11 +2,11 @@ var React = require('react'); var Box = require('../Box.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var TokenBase = require('./TokenBase.js'); var _RemoveTokenButton = require('./_RemoveTokenButton.js'); var _TokenTextContainer = require('./_TokenTextContainer.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/Truncate.js b/lib/Truncate.js index f7657fd1c60..dc5c936fa7c 100644 --- a/lib/Truncate.js +++ b/lib/Truncate.js @@ -17,5 +17,6 @@ Truncate.defaultProps = { inline: false, maxWidth: 125 }; +var Truncate$1 = Truncate; -module.exports = Truncate; +module.exports = Truncate$1; diff --git a/lib/UnderlineNav2/UnderlineNavItem.js b/lib/UnderlineNav2/UnderlineNavItem.js index ea012508186..3602d3c6a95 100644 --- a/lib/UnderlineNav2/UnderlineNavItem.js +++ b/lib/UnderlineNav2/UnderlineNavItem.js @@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var Box = require('../Box.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('../sx.js'); var UnderlineNavContext = require('./UnderlineNavContext.js'); var CounterLabel = require('../CounterLabel.js'); var styles = require('./styles.js'); var LoadingCounter = require('./LoadingCounter.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } diff --git a/lib/_InputCaption.js b/lib/_InputCaption.js index 7a9d9defcba..842253c5134 100644 --- a/lib/_InputCaption.js +++ b/lib/_InputCaption.js @@ -21,5 +21,6 @@ const InputCaption = ({ }, children); InputCaption.displayName = "InputCaption"; +var InputCaption$1 = InputCaption; -module.exports = InputCaption; +module.exports = InputCaption$1; diff --git a/lib/_InputLabel.js b/lib/_InputLabel.js index bf11431c43d..5f8cf81916f 100644 --- a/lib/_InputLabel.js +++ b/lib/_InputLabel.js @@ -45,5 +45,6 @@ const InputLabel = ({ }; InputLabel.displayName = "InputLabel"; +var InputLabel$1 = InputLabel; -module.exports = InputLabel; +module.exports = InputLabel$1; diff --git a/lib/_InputValidation.js b/lib/_InputValidation.js index bff64468148..9077054b1b2 100644 --- a/lib/_InputValidation.js +++ b/lib/_InputValidation.js @@ -57,5 +57,6 @@ const InputValidation = ({ }; InputValidation.displayName = "InputValidation"; +var InputValidation$1 = InputValidation; -module.exports = InputValidation; +module.exports = InputValidation$1; diff --git a/lib/_TextInputInnerAction.js b/lib/_TextInputInnerAction.js index fffb639faa6..c0565769e40 100644 --- a/lib/_TextInputInnerAction.js +++ b/lib/_TextInputInnerAction.js @@ -4,9 +4,9 @@ var React = require('react'); var Box = require('./Box.js'); var index = require('./Button/index.js'); var Tooltip = require('./Tooltip.js'); -require('@styled-system/css'); -var merge = require('deepmerge'); +require('./sx.js'); var IconButton = require('./Button/IconButton.js'); +var merge = require('deepmerge'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -90,5 +90,6 @@ const TextInputAction = /*#__PURE__*/React.forwardRef(({ TextInputAction.defaultProps = { variant: 'invisible' }; +var TextInputAction$1 = TextInputAction; -module.exports = TextInputAction; +module.exports = TextInputAction$1; diff --git a/lib/_TextInputInnerVisualSlot.js b/lib/_TextInputInnerVisualSlot.js index bf658e062b7..bc1ce3846a0 100644 --- a/lib/_TextInputInnerVisualSlot.js +++ b/lib/_TextInputInnerVisualSlot.js @@ -53,5 +53,6 @@ const TextInputInnerVisualSlot = ({ }; TextInputInnerVisualSlot.displayName = "TextInputInnerVisualSlot"; +var TextInputInnerVisualSlot$1 = TextInputInnerVisualSlot; -module.exports = TextInputInnerVisualSlot; +module.exports = TextInputInnerVisualSlot$1; diff --git a/lib/_TextInputWrapper.js b/lib/_TextInputWrapper.js index 57f31d27415..dea6f5b1c64 100644 --- a/lib/_TextInputWrapper.js +++ b/lib/_TextInputWrapper.js @@ -63,7 +63,8 @@ const TextInputWrapper = styled__default["default"](TextInputBaseWrapper).withCo displayName: "_TextInputWrapper__TextInputWrapper", componentId: "sc-apywy2-1" })(["background-repeat:no-repeat;background-position:right 8px center;& >:not(:last-child){margin-right:", ";}.TextInput-icon,.TextInput-action{align-self:center;color:", ";flex-shrink:0;}", " ", " ", ";"], constants.get('space.2'), constants.get('colors.fg.muted'), props => styled.css(["padding-left:", ";padding-right:", ";> input,> select{padding-left:", ";padding-right:", ";}"], props.hasLeadingVisual ? textInputHorizPadding : 0, props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0, !props.hasLeadingVisual ? textInputHorizPadding : 0, !props.hasTrailingVisual && !props.hasTrailingAction ? textInputHorizPadding : 0), props => props.validationStatus === 'warning' && styled.css(["border-color:", ";", ""], constants.get('colors.attention.emphasis'), renderFocusStyles(Boolean(props.hasTrailingAction), Boolean(props.isInputFocused))), sx["default"]); +var TextInputWrapper$1 = TextInputWrapper; exports.TextInputBaseWrapper = TextInputBaseWrapper; -exports["default"] = TextInputWrapper; +exports["default"] = TextInputWrapper$1; exports.textInputHorizPadding = textInputHorizPadding; diff --git a/lib/_UnstyledTextInput.js b/lib/_UnstyledTextInput.js index 1fef6c7cd6c..ae59b029fda 100644 --- a/lib/_UnstyledTextInput.js +++ b/lib/_UnstyledTextInput.js @@ -11,5 +11,6 @@ const UnstyledTextInput = styled__default["default"].input.withConfig({ displayName: "_UnstyledTextInput__UnstyledTextInput", componentId: "sc-31b2um-0" })(["border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;&:focus{outline:0;}", ";"], sx["default"]); +var UnstyledTextInput$1 = UnstyledTextInput; -module.exports = UnstyledTextInput; +module.exports = UnstyledTextInput$1; diff --git a/lib/_ValidationAnimationContainer.js b/lib/_ValidationAnimationContainer.js index 4f6dfa5247b..38233ab0bd9 100644 --- a/lib/_ValidationAnimationContainer.js +++ b/lib/_ValidationAnimationContainer.js @@ -38,4 +38,6 @@ const ValidationAnimationContainer = ({ }, children)) : null; }; -module.exports = ValidationAnimationContainer; +var ValidationAnimationContainer$1 = ValidationAnimationContainer; + +module.exports = ValidationAnimationContainer$1; diff --git a/lib/_VisuallyHidden.js b/lib/_VisuallyHidden.js index c37361e5fc3..0f60c7a6bf1 100644 --- a/lib/_VisuallyHidden.js +++ b/lib/_VisuallyHidden.js @@ -30,5 +30,6 @@ const VisuallyHidden = styled__default["default"].span.withConfig({ VisuallyHidden.defaultProps = { isVisible: false }; +var VisuallyHidden$1 = VisuallyHidden; -module.exports = VisuallyHidden; +module.exports = VisuallyHidden$1; diff --git a/lib/_getGlobalFocusStyles.js b/lib/_getGlobalFocusStyles.js index e2fc8818186..d197caa93fe 100644 --- a/lib/_getGlobalFocusStyles.js +++ b/lib/_getGlobalFocusStyles.js @@ -7,4 +7,6 @@ const globalFocusStyle = styled.css(["box-shadow:none;outline:2px solid ", ";"], const getGlobalFocusStyles = outlineOffset => styled.css(["&:focus:not(:disabled){", ";outline-offset:", ";&:not(:focus-visible){outline:solid 1px transparent;}}&:focus-visible:not(:disabled){", ";outline-offset:", ";}"], globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset, globalFocusStyle, typeof outlineOffset === 'undefined' ? '2px' : outlineOffset); -module.exports = getGlobalFocusStyles; +var getGlobalFocusStyles$1 = getGlobalFocusStyles; + +module.exports = getGlobalFocusStyles$1; diff --git a/lib/hooks/index.js b/lib/hooks/index.js new file mode 100644 index 00000000000..a3b1902b973 --- /dev/null +++ b/lib/hooks/index.js @@ -0,0 +1,31 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var useOnOutsideClick = require('./useOnOutsideClick.js'); +var useProvidedRefOrCreate = require('./useProvidedRefOrCreate.js'); +var useOnEscapePress = require('./useOnEscapePress.js'); +var useOpenAndCloseFocus = require('./useOpenAndCloseFocus.js'); +var useAnchoredPosition = require('./useAnchoredPosition.js'); +var useOverlay = require('./useOverlay.js'); +var useRenderForcingRef = require('./useRenderForcingRef.js'); +var useProvidedStateOrCreate = require('./useProvidedStateOrCreate.js'); +var useMenuInitialFocus = require('./useMenuInitialFocus.js'); +var useMenuKeyboardNavigation = require('./useMenuKeyboardNavigation.js'); +var useMnemonics = require('./useMnemonics.js'); +var useRefObjectAsForwardedRef = require('./useRefObjectAsForwardedRef.js'); + + + +exports.useOnOutsideClick = useOnOutsideClick.useOnOutsideClick; +exports.useProvidedRefOrCreate = useProvidedRefOrCreate.useProvidedRefOrCreate; +exports.useOnEscapePress = useOnEscapePress.useOnEscapePress; +exports.useOpenAndCloseFocus = useOpenAndCloseFocus.useOpenAndCloseFocus; +exports.useAnchoredPosition = useAnchoredPosition.useAnchoredPosition; +exports.useOverlay = useOverlay.useOverlay; +exports.useRenderForcingRef = useRenderForcingRef.useRenderForcingRef; +exports.useProvidedStateOrCreate = useProvidedStateOrCreate.useProvidedStateOrCreate; +exports.useMenuInitialFocus = useMenuInitialFocus.useMenuInitialFocus; +exports.useMenuKeyboardNavigation = useMenuKeyboardNavigation.useMenuKeyboardNavigation; +exports.useMnemonics = useMnemonics.useMnemonics; +exports.useRefObjectAsForwardedRef = useRefObjectAsForwardedRef.useRefObjectAsForwardedRef; diff --git a/lib/hooks/useControllableState.js b/lib/hooks/useControllableState.js index b00f45fa2aa..4f93074f52f 100644 --- a/lib/hooks/useControllableState.js +++ b/lib/hooks/useControllableState.js @@ -51,15 +51,11 @@ function useControllableState({ const controlledValue = value !== undefined; // Uncontrolled -> Controlled // If the component prop is uncontrolled, the prop value should be undefined - if (controlled.current === false && controlledValue) { - warn(); - } // Controlled -> Uncontrolled + if (controlled.current === false && controlledValue) ; // Controlled -> Uncontrolled // If the component prop is controlled, the prop value should be defined - if (controlled.current === true && !controlledValue) { - warn(); - } + if (controlled.current === true && !controlledValue) ; }, [name, value]); if (controlled.current === true) { @@ -68,8 +64,5 @@ function useControllableState({ return [state, setState]; } -/** Warn when running in a development environment */ - -const warn = function emptyFunction() {}; exports.useControllableState = useControllableState; diff --git a/lib/hooks/useMedia.js b/lib/hooks/useMedia.js index a8e37ee68c8..01baf635618 100644 --- a/lib/hooks/useMedia.js +++ b/lib/hooks/useMedia.js @@ -85,5 +85,56 @@ function useMedia(mediaQueryString, defaultState) { // be used for development and demo purposes to emulate specific features if // unavailable through devtools const MatchMediaContext = /*#__PURE__*/React.createContext({}); +const defaultFeatures = {}; +/** + * Use `MatchMedia` to emulate media conditions by passing in feature + * queries to the `features` prop. If a component uses `useMedia` with the + * feature passed in to `MatchMedia` it will force its value to match what is + * provided to `MatchMedia` + * + * This should be used for development and documentation only in situations + * where devtools cannot emulate this feature + * + * @example + * + * + * + */ + +function MatchMedia({ + children, + features = defaultFeatures +}) { + const value = useShallowObject(features); + return /*#__PURE__*/React__default["default"].createElement(MatchMediaContext.Provider, { + value: value + }, children); +} +MatchMedia.displayName = "MatchMedia"; + +/** + * Utility hook to provide a stable identity for a "simple" object which + * contains only primitive values. This provides a `useMemo`-esque signature + * without dealing with shallow equality checks in the dependency array. + * + * Note (perf): this hook iterates through keys and values of the object if the + * shallow equality check is false each time the hook is called + */ +function useShallowObject(object) { + const [value, setValue] = React.useState(object); + + if (value !== object) { + const match = Object.keys(object).every(key => { + return object[key] === value[key]; + }); + + if (!match) { + setValue(object); + } + } + + return value; +} +exports.MatchMedia = MatchMedia; exports.useMedia = useMedia; diff --git a/lib/index.js b/lib/index.js index 33bdd77e494..2feb44fe836 100644 --- a/lib/index.js +++ b/lib/index.js @@ -2,7 +2,6 @@ Object.defineProperty(exports, '__esModule', { value: true }); -var themePreval = require('./theme-preval.js'); var constants = require('./constants.js'); var BaseStyles = require('./BaseStyles.js'); var ThemeProvider = require('./ThemeProvider.js'); @@ -67,6 +66,7 @@ var UnderlineNav = require('./UnderlineNav.js'); var Checkbox = require('./Checkbox.js'); var Textarea = require('./Textarea.js'); var sx = require('./sx.js'); +var themePreval = require('./theme-preval.js'); var PageLayout = require('./PageLayout/PageLayout.js'); var AnchoredOverlay = require('./AnchoredOverlay/AnchoredOverlay.js'); var Autocomplete = require('./Autocomplete/Autocomplete.js'); @@ -89,10 +89,9 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge); -exports.theme = themePreval; exports.themeGet = constants.get; exports.BaseStyles = BaseStyles; -exports.ThemeProvider = ThemeProvider.ThemeProvider; +exports.ThemeProvider = ThemeProvider["default"]; exports.useColorSchemeVar = ThemeProvider.useColorSchemeVar; exports.useTheme = ThemeProvider.useTheme; exports.Box = Box; @@ -158,6 +157,7 @@ exports.UnderlineNav = UnderlineNav; exports.Checkbox = Checkbox; exports.Textarea = Textarea["default"]; exports.sx = sx["default"]; +exports.theme = themePreval; exports.PageLayout = PageLayout.PageLayout; exports.AnchoredOverlay = AnchoredOverlay.AnchoredOverlay; exports.Autocomplete = Autocomplete; diff --git a/lib/polyfills/eventListenerSignal.js b/lib/polyfills/eventListenerSignal.js new file mode 100644 index 00000000000..deb38beeeda --- /dev/null +++ b/lib/polyfills/eventListenerSignal.js @@ -0,0 +1,63 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +/* + +This file polyfills the following: https://github.com/whatwg/dom/issues/911 +Once all targeted browsers support this DOM feature, this polyfill can be deleted. + +This allows users to pass an AbortSignal to a call to addEventListener as part of the +AddEventListenerOptions object. When the signal is aborted, the event listener is +removed. + +*/ +let signalSupported = false; + +function noop() {} + +try { + const options = Object.create({}, { + signal: { + get() { + signalSupported = true; + } + + } + }); + window.addEventListener('test', noop, options); + window.removeEventListener('test', noop, options); +} catch (e) { + /* */ +} + +function featureSupported() { + return signalSupported; +} + +function monkeyPatch() { + if (typeof window === 'undefined') { + return; + } + + const originalAddEventListener = EventTarget.prototype.addEventListener; + + EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) { + if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) { + originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => { + this.removeEventListener(name, originalCallback, optionsOrCapture); + }); + } + + return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture); + }; +} + +function polyfill() { + if (!featureSupported()) { + monkeyPatch(); + signalSupported = true; + } +} + +exports.polyfill = polyfill; diff --git a/lib/sx.js b/lib/sx.js index 01658faf219..6ac416ef867 100644 --- a/lib/sx.js +++ b/lib/sx.js @@ -12,8 +12,10 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge); const sx = props => css__default["default"](props.sx); +var sx$1 = sx; + Object.defineProperty(exports, 'merge', { enumerable: true, get: function () { return merge__default["default"]; } }); -exports["default"] = sx; +exports["default"] = sx$1; diff --git a/lib/utils/create-slots.js b/lib/utils/create-slots.js index c268eaa8fc3..4707ad614f9 100644 --- a/lib/utils/create-slots.js +++ b/lib/utils/create-slots.js @@ -91,6 +91,4 @@ const createSlots = slotNames => { }; }; -var createSlots$1 = createSlots; - -module.exports = createSlots$1; +module.exports = createSlots; diff --git a/lib/utils/deprecate.js b/lib/utils/deprecate.js new file mode 100644 index 00000000000..b1593052ddd --- /dev/null +++ b/lib/utils/deprecate.js @@ -0,0 +1,60 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +require('react'); + +const noop = () => {}; // eslint-disable-next-line import/no-mutable-exports + + +let deprecate = noop; + +exports.useDeprecation = null; + +{ + exports.useDeprecation = () => { + return noop; + }; +} +class Deprecations { + static instance = null; + + static get() { + if (!Deprecations.instance) { + Deprecations.instance = new Deprecations(); + } + + return Deprecations.instance; + } + + constructor() { + this.deprecations = []; + } + + static deprecate({ + name, + message, + version + }) { + const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`; // eslint-disable-next-line no-console + + console.warn(msg); + this.get().deprecations.push({ + name, + message, + version + }); + } + + static getDeprecations() { + return this.get().deprecations; + } + + static clearDeprecations() { + this.get().deprecations.length = 0; + } + +} + +exports.Deprecations = Deprecations; +exports.deprecate = deprecate; diff --git a/lib/utils/polymorphic.js b/lib/utils/polymorphic.js new file mode 100644 index 00000000000..eb109abbed0 --- /dev/null +++ b/lib/utils/polymorphic.js @@ -0,0 +1,2 @@ +'use strict'; + diff --git a/lib/utils/ssr.js b/lib/utils/ssr.js new file mode 100644 index 00000000000..ae578645293 --- /dev/null +++ b/lib/utils/ssr.js @@ -0,0 +1,16 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var ssr = require('@react-aria/ssr'); + + + +Object.defineProperty(exports, 'SSRProvider', { + enumerable: true, + get: function () { return ssr.SSRProvider; } +}); +Object.defineProperty(exports, 'useSSRSafeId', { + enumerable: true, + get: function () { return ssr.useSSRSafeId; } +}); diff --git a/lib/utils/story-helpers.js b/lib/utils/story-helpers.js new file mode 100644 index 00000000000..75269015070 --- /dev/null +++ b/lib/utils/story-helpers.js @@ -0,0 +1,294 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); +var styled = require('styled-components'); +var constants = require('../constants.js'); +var themePreval = require('../theme-preval.js'); +var Box = require('../Box.js'); +var ThemeProvider = require('../ThemeProvider.js'); +var BaseStyles = require('../BaseStyles.js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +// set global theme styles for each story +const GlobalStyle = styled.createGlobalStyle(["body{background-color:", ";color:", ";}"], constants.get('colors.canvas.default'), constants.get('colors.fg.default')); // only remove padding for multi-theme view grid + +const GlobalStyleMultiTheme = styled.createGlobalStyle(["body{padding:0 !important;}"]); +const withThemeProvider = (Story, context) => { + // used for testing ThemeProvider.stories.tsx + if (context.parameters.disableThemeDecorator) return /*#__PURE__*/React__default["default"].createElement(Story, context); + const { + colorScheme + } = context.globals; + + if (colorScheme === 'all') { + return /*#__PURE__*/React__default["default"].createElement(Box, { + sx: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))', + height: '100vh' + } + }, /*#__PURE__*/React__default["default"].createElement(GlobalStyleMultiTheme, null), Object.keys(themePreval.colorSchemes).map(scheme => /*#__PURE__*/React__default["default"].createElement(ThemeProvider["default"], { + key: scheme, + colorMode: "day", + dayScheme: scheme + }, /*#__PURE__*/React__default["default"].createElement(BaseStyles, null, /*#__PURE__*/React__default["default"].createElement(Box, { + sx: { + padding: '1rem', + height: '100%', + backgroundColor: 'canvas.default', + color: 'fg.default' + } + }, /*#__PURE__*/React__default["default"].createElement("div", { + id: `html-addon-root-${scheme}` + }, /*#__PURE__*/React__default["default"].createElement(Story, context))))))); + } + + return /*#__PURE__*/React__default["default"].createElement(ThemeProvider["default"], { + colorMode: "day", + dayScheme: colorScheme + }, /*#__PURE__*/React__default["default"].createElement(GlobalStyle, null), /*#__PURE__*/React__default["default"].createElement(BaseStyles, null, /*#__PURE__*/React__default["default"].createElement("div", { + id: "html-addon-root" + }, /*#__PURE__*/React__default["default"].createElement(Story, context)))); +}; +withThemeProvider.displayName = "withThemeProvider"; +const toolbarTypes = { + colorScheme: { + name: 'Color scheme', + description: 'Switch color scheme', + defaultValue: 'light', + toolbar: { + icon: 'photo', + items: [...Object.keys(themePreval.colorSchemes), 'all'], + showName: true + } + } +}; +const inputWrapperArgTypes = { + block: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + contrast: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + placeholder: { + defaultValue: '', + control: { + type: 'text' + } + }, + size: { + name: 'size (input)', + // TODO: remove '(input)' + defaultValue: 'medium', + options: ['small', 'medium', 'large'], + control: { + type: 'radio' + } + }, + validationStatus: { + defaultValue: undefined, + options: ['error', 'success', 'warning', undefined], + control: { + type: 'radio' + } + } +}; +const textInputArgTypesUnsorted = { ...inputWrapperArgTypes, + loading: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + loaderPosition: { + defaultValue: 'auto', + options: ['auto', 'leading', 'trailing'], + control: { + type: 'radio' + } + }, + monospace: { + defaultValue: false, + control: { + type: 'boolean' + } + } +}; // Alphabetize and optionally categorize the props + +const getTextInputArgTypes = category => Object.keys(textInputArgTypesUnsorted).sort().reduce((obj, key) => { + obj[key] = category ? { // have to do weird type casting so we can spread the object + ...textInputArgTypesUnsorted[key], + table: { + category + } + } : textInputArgTypesUnsorted[key]; + return obj; +}, {}); +const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'sx', 'trailingVisual', 'trailingAction']; +const textInputWithTokensArgTypes = { + hideTokenRemoveButtons: { + defaultValue: false, + type: 'boolean', + table: { + category: 'TextInputWithTokens props' + } + }, + maxHeight: { + type: 'string', + defaultValue: 'none', + description: 'Any valid value for the CSS max-height property', + table: { + category: 'TextInputWithTokens props' + } + }, + preventTokenWrapping: { + defaultValue: false, + type: 'boolean', + table: { + category: 'TextInputWithTokens props' + } + }, + size: { + name: 'size (token size)', + defaultValue: 'xlarge', + options: ['small', 'medium', 'large', 'xlarge'], + control: { + type: 'radio' + }, + table: { + category: 'TextInputWithTokens props' + } + }, + visibleTokenCount: { + defaultValue: 999, + type: 'number', + table: { + category: 'TextInputWithTokens props' + } + } +}; +const formControlArgTypes = { + // FormControl + required: { + defaultValue: false, + control: { + type: 'boolean' + }, + table: { + category: 'FormControl' + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + }, + table: { + category: 'FormControl' + } + }, + // FormControl.Label + labelChildren: { + name: 'children', + type: 'string', + defaultValue: 'Label', + table: { + category: 'FormControl.Label' + } + }, + visuallyHidden: { + defaultValue: false, + type: 'boolean', + table: { + category: 'FormControl.Label' + } + }, + // FormControl.Caption + captionChildren: { + name: 'children', + type: 'string', + defaultValue: '', + table: { + category: 'FormControl.Caption' + } + }, + // FormControl.Validation + validationChildren: { + name: 'children', + type: 'string', + defaultValue: '', + table: { + category: 'FormControl.Validation' + } + }, + variant: { + defaultValue: 'error', + control: { + type: 'radio', + options: ['error', 'success', 'warning'] + }, + table: { + category: 'FormControl.Validation' + } + } +}; +const formControlArgTypeKeys = Object.keys(formControlArgTypes); +const formControlArgTypesWithoutValidation = formControlArgTypeKeys.reduce((acc, key) => { + if (formControlArgTypes[key].table.category !== 'FormControl.Validation') { + acc[key] = formControlArgTypes[key]; + } + + return acc; +}, {}); +const getFormControlArgsByChildComponent = ({ + captionChildren, + disabled, + labelChildren, + required, + validationChildren, + variant, + visuallyHidden +}) => ({ + parentArgs: { + disabled, + required + }, + labelArgs: { + visuallyHidden, + children: labelChildren + }, + captionArgs: { + children: captionChildren + }, + validationArgs: { + children: validationChildren, + variant + } +}); + +exports.formControlArgTypes = formControlArgTypes; +exports.formControlArgTypesWithoutValidation = formControlArgTypesWithoutValidation; +exports.getFormControlArgsByChildComponent = getFormControlArgsByChildComponent; +exports.getTextInputArgTypes = getTextInputArgTypes; +exports.inputWrapperArgTypes = inputWrapperArgTypes; +exports.textInputExcludedControlKeys = textInputExcludedControlKeys; +exports.textInputWithTokensArgTypes = textInputWithTokensArgTypes; +exports.toolbarTypes = toolbarTypes; +exports.withThemeProvider = withThemeProvider; diff --git a/lib/utils/test-deprecations.js b/lib/utils/test-deprecations.js new file mode 100644 index 00000000000..6d9d0ee8521 --- /dev/null +++ b/lib/utils/test-deprecations.js @@ -0,0 +1,23 @@ +'use strict'; + +var semver = require('semver'); +var deprecate = require('./deprecate.js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var semver__default = /*#__PURE__*/_interopDefaultLegacy(semver); + +const ourVersion = require('../../package.json').version; + +beforeEach(() => { + deprecate.Deprecations.clearDeprecations(); +}); +afterEach(() => { + const deprecations = deprecate.Deprecations.getDeprecations(); + + for (const dep of deprecations) { + if (semver__default["default"].gte(ourVersion, dep.version)) { + throw new Error(`Found a deprecation that should be removed in ${dep.version}`); + } + } +}); diff --git a/lib/utils/test-matchers.js b/lib/utils/test-matchers.js new file mode 100644 index 00000000000..708d6f234b1 --- /dev/null +++ b/lib/utils/test-matchers.js @@ -0,0 +1,118 @@ +'use strict'; + +require('@testing-library/jest-dom'); +require('jest-styled-components'); +var serializer = require('jest-styled-components/serializer'); +var React = require('react'); +var testing = require('./testing.js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +expect.addSnapshotSerializer(serializer.styleSheetSerializer); + +const stringify = d => JSON.stringify(d, null, ' '); + +expect.extend({ + toMatchKeys(obj, values) { + return { + pass: Object.keys(values).every(key => this.equals(obj[key], values[key])), + message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}` + }; + }, + + toHaveClass(node, klass) { + const classes = testing.getClasses(node); + const pass = classes.includes(klass); + return { + pass, + message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}` + }; + }, + + toHaveClasses(node, klasses, only = false) { + const classes = testing.getClasses(node); + const pass = only ? this.equals(classes.sort(), klasses.sort()) : klasses.every(klass => classes.includes(klass)); + return { + pass, + message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}` + }; + }, + + toImplementSxBehavior(element) { + const mediaKey = '@media (max-width:123px)'; + const sxPropValue = { + [mediaKey]: { + color: 'red.5' + } + }; + const elem = /*#__PURE__*/React__default["default"].cloneElement(element, { + sx: sxPropValue + }); + + function checkStylesDeep(rendered) { + const className = rendered.props.className; + const styles = testing.getComputedStyles(className); + const mediaStyles = styles[mediaKey]; + + if (mediaStyles && mediaStyles.color) { + return true; + } else if (rendered.children) { + return rendered.children.some(child => checkStylesDeep(child)); + } else { + return false; + } + } + + return { + pass: checkStylesDeep(testing.render(elem)), + message: () => 'sx prop values did not change styles of component nor of any sub-components' + }; + }, + + toSetExports(mod, expectedExports) { + if (!Object.keys(expectedExports).includes('default')) { + return { + pass: false, + message: () => "You must specify the module's default export" + }; + } + + const seen = new Set(); + + for (const exp of Object.keys(expectedExports)) { + seen.add(exp); + + if (mod[exp] !== expectedExports[exp]) { + if (!mod[exp] && !expectedExports[exp]) { + continue; + } + + return { + pass: false, + message: () => `Module exported a different value from key '${exp}' than expected` + }; + } + } + + for (const exp of Object.keys(mod)) { + if (seen.has(exp)) { + continue; + } + + if (mod[exp] !== expectedExports[exp]) { + return { + pass: false, + message: () => `Module exported an unexpected value from key '${exp}'` + }; + } + } + + return { + pass: true, + message: () => '' + }; + } + +}); diff --git a/lib/utils/testing.js b/lib/utils/testing.js new file mode 100644 index 00000000000..7037b588542 --- /dev/null +++ b/lib/utils/testing.js @@ -0,0 +1,278 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); +var util = require('util'); +var renderer = require('react-test-renderer'); +var enzyme = require('enzyme'); +var Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); +var react = require('@testing-library/react'); +var jestAxe = require('jest-axe'); +var themePreval = require('../theme-preval.js'); +var ThemeProvider = require('../ThemeProvider.js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); +var renderer__default = /*#__PURE__*/_interopDefaultLegacy(renderer); +var enzyme__default = /*#__PURE__*/_interopDefaultLegacy(enzyme); +var Adapter__default = /*#__PURE__*/_interopDefaultLegacy(Adapter); + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const readFile = util.promisify(require('fs').readFile); +const COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/; +enzyme__default["default"].configure({ + adapter: new Adapter__default["default"]() +}); +function mount(component) { + return enzyme__default["default"].mount(component); +} + +/** + * Render the component (a React.createElement() or JSX expression) + * into its intermediate object representation with 'type', + * 'props', and 'children' keys + * + * The returned object can be matched with expect().toEqual(), e.g. + * + * ```js + * expect(render()).toEqual(render(
)) + * ``` + */ +function render(component, theme = themePreval) { + return renderer__default["default"].create( /*#__PURE__*/React__default["default"].createElement(ThemeProvider["default"], { + theme: theme + }, component)).toJSON(); +} +/** + * Render the component (a React.createElement() or JSX expression) + * using react-test-renderer and return the root node + * ``` + */ + +function renderRoot(component) { + return renderer__default["default"].create(component).root; +} +/** + * Get the HTML class names rendered by the component instance + * as an array. + * + * ```js + * expect(renderClasses(
)) + * .toEqual(['a', 'b']) + * ``` + */ + +function renderClasses(component) { + const { + props: { + className + } + } = render(component); + return className ? className.trim().split(' ') : []; +} +/** + * Returns true if a node renders with a single class. + */ + +function rendersClass(node, klass) { + return renderClasses(node).includes(klass); +} +function px(value) { + return typeof value === 'number' ? `${value}px` : value; +} +function percent(value) { + return typeof value === 'number' ? `${value}%` : value; +} +function renderStyles(node) { + const { + props: { + className + } + } = render(node); + return getComputedStyles(className); +} +function getComputedStyles(className) { + const div = document.createElement('div'); + div.className = className; + const computed = {}; + + for (const sheet of document.styleSheets) { + // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule + for (const rule of sheet.cssRules) { + if (rule instanceof CSSMediaRule) { + readMedia(rule); + } else if (rule instanceof CSSStyleRule) { + readRule(rule, computed); + } else ; + } + } + + return computed; + + function matchesSafe(node, selector) { + if (!selector) { + return false; + } + + try { + return node.matches(selector); + } catch (error) { + return false; + } + } + + function readRule(rule, dest) { + if (matchesSafe(div, rule.selectorText)) { + const { + style + } = rule; + + for (let i = 0; i < style.length; i++) { + const prop = style[i]; + dest[prop] = style.getPropertyValue(prop); + } + } + } + + function readMedia(mediaRule) { + const key = `@media ${mediaRule.media[0]}`; // const dest = computed[key] || (computed[key] = {}) + + const dest = {}; + + for (const rule of mediaRule.cssRules) { + if (rule instanceof CSSStyleRule) { + readRule(rule, dest); + } + } // Don't add media rule to computed styles + // if no styles were actually applied + + + if (Object.keys(dest).length > 0) { + computed[key] = dest; + } + } +} +/** + * This provides a layer of compatibility between the render() function from + * react-test-renderer and Enzyme's mount() + */ + +function getProps(node) { + return typeof node.props === 'function' ? node.props() : node.props; +} +function getClassName(node) { + return getProps(node).className; +} +function getClasses(node) { + const className = getClassName(node); + return className ? className.trim().split(/ +/) : []; +} +async function loadCSS(path) { + const css = await readFile(require.resolve(path), 'utf8'); + const style = document.createElement('style'); + style.setAttribute('data-path', path); + style.textContent = css; + document.head.appendChild(style); + return style; +} +function unloadCSS(path) { + const style = document.querySelector(`style[data-path="${path}"]`); + + if (style) { + style.remove(); + return true; + } +} // If a component requires certain props or other conditions in order +// to render without errors, you can pass a `toRender` function that +// returns an element ready to be rendered. + +function behavesAsComponent({ + Component, + toRender, + options +}) { + options = options || {}; + + const getElement = () => toRender ? toRender() : /*#__PURE__*/React__default["default"].createElement(Component, null); + + if (!options.skipSx) { + it('implements sx prop behavior', () => { + expect(getElement()).toImplementSxBehavior(); + }); + } + + if (!options.skipAs) { + it('respects the as prop', () => { + const As = /*#__PURE__*/React__default["default"].forwardRef((_props, ref) => /*#__PURE__*/React__default["default"].createElement("div", { + className: "as-component", + ref: ref + })); + const elem = /*#__PURE__*/React__default["default"].cloneElement(getElement(), { + as: As + }); + expect(render(elem)).toEqual(render( /*#__PURE__*/React__default["default"].createElement(As, null))); + }); + } + + it('sets a valid displayName', () => { + expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX); + }); + it('renders consistently', () => { + expect(render(getElement())).toMatchSnapshot(); + }); +} // eslint-disable-next-line @typescript-eslint/no-explicit-any + +function checkExports(path, exports) { + it('has declared exports', () => { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const mod = require(`../${path}`); + + expect(mod).toSetExports(exports); + }); +} +expect.extend(jestAxe.toHaveNoViolations); +function checkStoriesForAxeViolations(name, storyDir) { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const stories = require(`${storyDir || '../stories/'}${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta + + + const { + default: _meta, + ...Stories + } = stories; + Object.values(Stories).map(Story => { + if (typeof Story !== 'function') return; + const { + storyName, + name: StoryFunctionName + } = Story; + it(`story ${storyName || StoryFunctionName} should have no axe violations`, async () => { + const { + container + } = react.render( /*#__PURE__*/React__default["default"].createElement(Story, null)); + const results = await jestAxe.axe(container); + expect(results).toHaveNoViolations(); + }); + }); +} + +exports.COMPONENT_DISPLAY_NAME_REGEX = COMPONENT_DISPLAY_NAME_REGEX; +exports.behavesAsComponent = behavesAsComponent; +exports.checkExports = checkExports; +exports.checkStoriesForAxeViolations = checkStoriesForAxeViolations; +exports.getClassName = getClassName; +exports.getClasses = getClasses; +exports.getComputedStyles = getComputedStyles; +exports.getProps = getProps; +exports.loadCSS = loadCSS; +exports.mount = mount; +exports.percent = percent; +exports.px = px; +exports.render = render; +exports.renderClasses = renderClasses; +exports.renderRoot = renderRoot; +exports.renderStyles = renderStyles; +exports.rendersClass = rendersClass; +exports.unloadCSS = unloadCSS; diff --git a/lib/utils/theme.js b/lib/utils/theme.js new file mode 100644 index 00000000000..18c058557db --- /dev/null +++ b/lib/utils/theme.js @@ -0,0 +1,7 @@ +'use strict'; + +var theme = require('./theme2.js'); + + + +module.exports = theme; diff --git a/lib/utils/theme2.js b/lib/utils/theme2.js new file mode 100644 index 00000000000..7dce30713fe --- /dev/null +++ b/lib/utils/theme2.js @@ -0,0 +1,80 @@ +'use strict'; + +var require$$0 = require('lodash.isempty'); +var require$$1 = require('lodash.isobject'); +var require$$2 = require('chroma-js'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0); +var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1); +var require$$2__default = /*#__PURE__*/_interopDefaultLegacy(require$$2); + +// Utility functions used in theme-preval.js +// This file needs to be a JavaScript file using CommonJS to be compatible with preval +const isEmpty = require$$0__default["default"]; + +const isObject = require$$1__default["default"]; + +const chroma = require$$2__default["default"]; + +function fontStack(fonts) { + return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', '); +} // The following functions are a temporary measure for splitting shadow values out from the colors object. +// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation +// will not be needed. + + +function isShadowValue(value) { + return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value); +} + +function isColorValue(value) { + return chroma.valid(value); +} + +function filterObject(obj, predicate) { + if (Array.isArray(obj)) { + return obj.filter(predicate); + } + + return Object.entries(obj).reduce((acc, [key, value]) => { + if (isObject(value)) { + const result = filterObject(value, predicate); // Don't include empty objects or arrays + + if (!isEmpty(result)) { + acc[key] = result; + } + } else if (predicate(value)) { + acc[key] = value; + } + + return acc; + }, {}); +} + +function partitionColors(colors) { + return { + colors: filterObject(colors, value => isColorValue(value)), + shadows: filterObject(colors, value => isShadowValue(value)) + }; +} + +function omitScale(obj) { + const { + scale, + ...rest + } = obj; + return rest; +} + +var theme = { + fontStack, + isShadowValue, + isColorValue, + filterObject, + partitionColors, + omitScale +}; + +module.exports = theme; diff --git a/lib/utils/useIsomorphicLayoutEffect.js b/lib/utils/useIsomorphicLayoutEffect.js index 86585b2feac..8e96cc95fd2 100644 --- a/lib/utils/useIsomorphicLayoutEffect.js +++ b/lib/utils/useIsomorphicLayoutEffect.js @@ -3,6 +3,5 @@ var React = require('react'); const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect; -var useLayoutEffect = useIsomorphicLayoutEffect; -module.exports = useLayoutEffect; +module.exports = useIsomorphicLayoutEffect;