@primer/react 38.0.0-rc.2 → 38.0.0-rc.3

package/lib/UnderlineNav/styles.d.ts

@@ -1,38 +0,0 @@
-import type { Theme } from '../ThemeProvider';
-import type { BetterSystemStyleObject } from '../sx';
-export declare const getDividerStyle: (theme?: Theme) => {
-    display: string;
-    borderLeft: string;
-    width: string;
-    borderLeftColor: string;
-    marginRight: number;
-    height: string;
-};
-export declare const moreBtnStyles: {
-    margin: number;
-    border: number;
-    background: string;
-    fontWeight: string;
-    boxShadow: string;
-    paddingY: number;
-    paddingX: number;
-    '& > span[data-component="trailingVisual"]': {
-        marginLeft: number;
-    };
-};
-export declare const menuItemStyles: {
-    '& > span': {
-        display: string;
-    };
-    textDecoration: string;
-};
-export declare const baseMenuMinWidth = 192;
-export declare const baseMenuStyles: BetterSystemStyleObject;
-/**
- *
- * @param containerRef The Menu List Container Reference.
- * @param listRef The Underline Nav Container Reference.
- * @description This calculates the position of the menu
- */
-export declare const menuStyles: (containerRef: Element | null, listRef: Element | null) => BetterSystemStyleObject;
-//# sourceMappingURL=styles.d.ts.map

package/lib/UnderlineNav/styles.js

@@ -1,81 +0,0 @@
-'use strict';
-
-var behaviors = require('@primer/behaviors');
-
-const getDividerStyle = theme => ({
-  display: 'inline-block',
-  borderLeft: '1px solid',
-  width: '1px',
-  borderLeftColor: `${theme === null || theme === void 0 ? void 0 : theme.colors.border.muted}`,
-  marginRight: 1,
-  height: '24px' // The height of the divider - reference from Figma
-});
-const moreBtnStyles = {
-  //set margin 0 here because safari puts extra margin around the button, rest is to reset style to make it look like a list element
-  margin: 0,
-  border: 0,
-  background: 'transparent',
-  fontWeight: 'normal',
-  boxShadow: 'none',
-  paddingY: 1,
-  paddingX: 2,
-  '& > span[data-component="trailingVisual"]': {
-    marginLeft: 0
-  }
-};
-const menuItemStyles = {
-  // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/tree/main/packages/react/src/ActionList/Selection.tsx#L32
-  '& > span': {
-    display: 'none'
-  },
-  // To reset the style when the menu items are rendered as react router links
-  textDecoration: 'none'
-};
-const baseMenuMinWidth = 192;
-const baseMenuStyles = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-  borderRadius: '12px',
-  backgroundColor: 'canvas.overlay',
-  listStyle: 'none',
-  // Values are from ActionMenu
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: '0'
-};
-
-/**
- *
- * @param containerRef The Menu List Container Reference.
- * @param listRef The Underline Nav Container Reference.
- * @description This calculates the position of the menu
- */
-const menuStyles = (containerRef, listRef) => {
-  if (containerRef && listRef) {
-    const {
-      left
-    } = behaviors.getAnchoredPosition(containerRef, listRef, {
-      align: 'start',
-      side: 'outside-bottom'
-    });
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {
-      right,
-      ...rest
-    } = baseMenuStyles;
-    return {
-      ...rest,
-      left
-    };
-  }
-  return baseMenuStyles;
-};
-
-exports.baseMenuMinWidth = baseMenuMinWidth;
-exports.baseMenuStyles = baseMenuStyles;
-exports.getDividerStyle = getDividerStyle;
-exports.menuItemStyles = menuItemStyles;
-exports.menuStyles = menuStyles;
-exports.moreBtnStyles = moreBtnStyles;

package/lib/UnderlineNav/types.d.ts

@@ -1,10 +0,0 @@
-export type ChildSize = {
-    text: string;
-    width: number;
-};
-export type ChildWidthArray = Array<ChildSize>;
-export type ResponsiveProps = {
-    items: Array<React.ReactElement>;
-    menuItems: Array<React.ReactElement>;
-};
-//# sourceMappingURL=types.d.ts.map

package/lib/VisuallyHidden/VisuallyHidden-ce2a3270.css

@@ -1,2 +0,0 @@
-.prc-VisuallyHidden-VisuallyHidden-UNWQp:not(:focus):not(:active):not(:focus-within){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
-/*# sourceMappingURL=VisuallyHidden-ce2a3270.css.map */

package/lib/VisuallyHidden/VisuallyHidden-ce2a3270.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/VisuallyHidden/VisuallyHidden.module.css"],"names":[],"mappings":"AACE,qFAME,oBAAqB,CAHrB,UAAW,CACX,eAAgB,CAHhB,iBAAkB,CAIlB,kBAAmB,CAHnB,SAKF","file":"VisuallyHidden-ce2a3270.css","sourcesContent":[".VisuallyHidden {\n  &:not(:focus):not(:active):not(:focus-within) {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n"]}

package/lib/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-import { type HTMLAttributes } from 'react';
-/**
- * Provides a component that implements the "visually hidden" technique. This is
- * analagous to the common `sr-only` class. Children that are rendered inside
- * this component will not be visible but will be available to screen readers.
- *
- * Note: if this component, or a descendant, has focus then this component will
- * no longer be visually hidden.
- *
- * @see https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
- */
-export declare const VisuallyHidden: ({ className, children, ...rest }: VisuallyHiddenProps) => React.JSX.Element;
-export type VisuallyHiddenProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
-    className?: string;
-}>;
-//# sourceMappingURL=VisuallyHidden.d.ts.map

package/lib/VisuallyHidden/VisuallyHidden.js

@@ -1,53 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var clsx = require('clsx');
-var VisuallyHidden_module = require('./VisuallyHidden.module.css.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const VisuallyHidden = t0 => {
-  const $ = reactCompilerRuntime.c(10);
-  let children;
-  let className;
-  let rest;
-  if ($[0] !== t0) {
-    ({
-      className,
-      children,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-  }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx.clsx(className, VisuallyHidden_module.VisuallyHidden);
-    $[4] = className;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  let t2;
-  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: t1,
-      ...rest,
-      children: children
-    });
-    $[6] = children;
-    $[7] = rest;
-    $[8] = t1;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  return t2;
-};
-
-exports.VisuallyHidden = VisuallyHidden;

package/lib/VisuallyHidden/VisuallyHidden.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./VisuallyHidden-ce2a3270.css');
-
-var classes = {"VisuallyHidden":"prc-VisuallyHidden-VisuallyHidden-UNWQp"};
-
-module.exports = classes;

package/lib/VisuallyHidden/index.d.ts

@@ -1,3 +0,0 @@
-export { VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './VisuallyHidden';
-//# sourceMappingURL=index.d.ts.map

package/lib/_VisuallyHidden-5c0a2499.css

@@ -1,2 +0,0 @@
-.prc-src-InternalVisuallyHidden-nlR9R{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}
-/*# sourceMappingURL=_VisuallyHidden-5c0a2499.css.map */

package/lib/_VisuallyHidden-5c0a2499.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/_VisuallyHidden.module.css"],"names":[],"mappings":"AAAA,sCAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF","file":"_VisuallyHidden-5c0a2499.css","sourcesContent":[".InternalVisuallyHidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n"]}

package/lib/_VisuallyHidden.d.ts

@@ -1,8 +0,0 @@
-import type { SxProp } from './sx';
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
-    isVisible?: boolean;
-    as?: React.ElementType;
-}
-declare function VisuallyHidden({ isVisible, children, as, className, ...rest }: Props & SxProp): import("react").JSX.Element;
-export default VisuallyHidden;
-//# sourceMappingURL=_VisuallyHidden.d.ts.map

package/lib/_VisuallyHidden.js

@@ -1,69 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var _VisuallyHidden_module = require('./_VisuallyHidden.module.css.js');
-var clsx = require('clsx');
-var BoxWithFallback = require('./internal/components/BoxWithFallback.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function VisuallyHidden(t0) {
-  const $ = reactCompilerRuntime.c(14);
-  let children;
-  let className;
-  let isVisible;
-  let rest;
-  let t1;
-  if ($[0] !== t0) {
-    ({
-      isVisible,
-      children,
-      as: t1,
-      className,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = isVisible;
-    $[4] = rest;
-    $[5] = t1;
-  } else {
-    children = $[1];
-    className = $[2];
-    isVisible = $[3];
-    rest = $[4];
-    t1 = $[5];
-  }
-  const as = t1 === undefined ? "span" : t1;
-  const t2 = !isVisible;
-  let t3;
-  if ($[6] !== className || $[7] !== t2) {
-    t3 = clsx.clsx(className, {
-      [_VisuallyHidden_module.InternalVisuallyHidden]: t2
-    });
-    $[6] = className;
-    $[7] = t2;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  let t4;
-  if ($[9] !== as || $[10] !== children || $[11] !== rest || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-      as: as,
-      className: t3,
-      ...rest,
-      children: children
-    });
-    $[9] = as;
-    $[10] = children;
-    $[11] = rest;
-    $[12] = t3;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  return t4;
-}
-
-module.exports = VisuallyHidden;

package/lib/_VisuallyHidden.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./_VisuallyHidden-5c0a2499.css');
-
-var classes = {"InternalVisuallyHidden":"prc-src-InternalVisuallyHidden-nlR9R"};
-
-module.exports = classes;

package/lib/constants.d.ts

@@ -1,15 +0,0 @@
-import * as styledSystem from 'styled-system';
-export declare const get: (key: string) => (props: any) => any;
-export declare const COMMON: styledSystem.styleFn;
-export interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {
-}
-export declare const TYPOGRAPHY: styledSystem.styleFn;
-export interface SystemTypographyProps extends styledSystem.TypographyProps {
-    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
-}
-export declare const BORDER: styledSystem.styleFn;
-export interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {
-}
-export declare const LAYOUT: styledSystem.styleFn;
-export type SystemLayoutProps = styledSystem.LayoutProps;
-//# sourceMappingURL=constants.d.ts.map

package/lib/constants.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var themeGet = require('@styled-system/theme-get');
-var styledSystem = require('styled-system');
-var theme = require('./theme.js');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var styledSystem__namespace = /*#__PURE__*/_interopNamespace(styledSystem);
-
-const {
-  get: getKey,
-  compose,
-  system
-} = styledSystem__namespace;
-const get = key => themeGet.themeGet(key, getKey(theme, key));
-
-// Common props
-
-const COMMON = compose(styledSystem__namespace.space, styledSystem__namespace.color, styledSystem__namespace.display);
-// Typography props
-
-const whiteSpace = system({
-  whiteSpace: {
-    property: 'whiteSpace'
-    // cssProperty: 'whiteSpace',
-  }
-});
-const TYPOGRAPHY = compose(styledSystem__namespace.typography, whiteSpace);
-// Border props
-
-compose(styledSystem__namespace.border, styledSystem__namespace.shadow);
-
-exports.COMMON = COMMON;
-exports.TYPOGRAPHY = TYPOGRAPHY;
-exports.get = get;

package/lib/deprecated/ActionList/Divider.d.ts

@@ -1,9 +0,0 @@
-export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export declare function Divider(): JSX.Element;
-export declare namespace Divider {
-    var renderItem: typeof Divider;
-}
-//# sourceMappingURL=Divider.d.ts.map

package/lib/deprecated/ActionList/Divider.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var styled = require('styled-components');
-var constants = require('../../constants.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledDivider = styled__default.default.div.withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-1s7tlfq-0"
-})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], constants.get('colors.border.muted'), constants.get('space.2'), constants.get('space.2'));
-
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-function Divider() {
-  const $ = reactCompilerRuntime.c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = /*#__PURE__*/jsxRuntime.jsx(StyledDivider, {});
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;
-
-exports.Divider = Divider;
-exports.StyledDivider = StyledDivider;

package/lib/deprecated/ActionList/Group.d.ts

@@ -1,29 +0,0 @@
-import type React from 'react';
-import type { SxProp } from '../../sx';
-import type { HeaderProps } from './Header';
-/**
- * Contract for props passed to the `Group` component.
- */
-export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
-    /**
-     * Props for a `Header` to render in the `Group`.
-     */
-    header?: HeaderProps;
-    /**
-     * The id of the group.
-     */
-    groupId?: string;
-    /**
-     * `Items` to render in the `Group`.
-     */
-    items?: JSX.Element[];
-    /**
-     * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
-     */
-    showItemDividers?: boolean;
-}
-/**
- * Collects related `Items` in an `ActionList`.
- */
-export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;
-//# sourceMappingURL=Group.d.ts.map

package/lib/deprecated/ActionList/Group.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var styled = require('styled-components');
-var sx = require('../../sx.js');
-var Header = require('./Header.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledGroup = styled__default.default.div.withConfig({
-  displayName: "Group__StyledGroup",
-  componentId: "sc-1s2aw76-0"
-})(["", ""], sx.default);
-
-/**
- * Collects related `Items` in an `ActionList`.
- */
-function Group(t0) {
-  const $ = reactCompilerRuntime.c(10);
-  let header;
-  let items;
-  let props;
-  if ($[0] !== t0) {
-    ({
-      header,
-      items,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = header;
-    $[2] = items;
-    $[3] = props;
-  } else {
-    header = $[1];
-    items = $[2];
-    props = $[3];
-  }
-  let t1;
-  if ($[4] !== header) {
-    t1 = header && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
-      ...header
-    });
-    $[4] = header;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  let t2;
-  if ($[6] !== items || $[7] !== props || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsxs(StyledGroup, {
-      ...props,
-      children: [t1, items]
-    });
-    $[6] = items;
-    $[7] = props;
-    $[8] = t1;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  return t2;
-}
-
-exports.Group = Group;

package/lib/deprecated/ActionList/Header.d.ts

@@ -1,30 +0,0 @@
-import type React from 'react';
-import type { SxProp } from '../../sx';
-/**
- * Contract for props passed to the `Header` component.
- */
-export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
-    /**
-     * Style variations. Usage is discretionary.
-     *
-     * - `"filled"` - Superimposed on a background, offset from nearby content
-     * - `"subtle"` - Relatively less offset from nearby content
-     */
-    variant?: 'subtle' | 'filled';
-    /**
-     * Primary text which names a `Group`.
-     */
-    title: string;
-    /**
-     * Secondary text which provides additional information about a `Group`.
-     */
-    auxiliaryText?: string;
-}
-export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
-    variant: HeaderProps["variant"];
-} & SxProp, never>;
-/**
- * Displays the name and description of a `Group`.
- */
-export declare function Header({ variant, title, auxiliaryText, children: _children, ...props }: HeaderProps): JSX.Element;
-//# sourceMappingURL=Header.d.ts.map

package/lib/deprecated/ActionList/Header.js

@@ -1,83 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var styled = require('styled-components');
-var constants = require('../../constants.js');
-var sx = require('../../sx.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledHeader = styled__default.default.div.withConfig({
-  displayName: "Header__StyledHeader",
-  componentId: "sc-cjezay-0"
-})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], constants.get('space.3'), constants.get('fontSizes.0'), constants.get('fontWeights.bold'), constants.get('colors.fg.muted'), ({
-  variant
-}) => variant === 'filled' && styled.css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], constants.get('colors.canvas.subtle'), constants.get('space.2'), constants.get('colors.neutral.muted'), constants.get('colors.neutral.muted')), sx.default);
-
-/**
- * Displays the name and description of a `Group`.
- */
-function Header(t0) {
-  const $ = reactCompilerRuntime.c(12);
-  let auxiliaryText;
-  let props;
-  let t1;
-  let title;
-  if ($[0] !== t0) {
-    const {
-      variant: t2,
-      title: t3,
-      auxiliaryText: t4,
-      children: _children,
-      ...t5
-    } = t0;
-    t1 = t2;
-    title = t3;
-    auxiliaryText = t4;
-    props = t5;
-    $[0] = t0;
-    $[1] = auxiliaryText;
-    $[2] = props;
-    $[3] = t1;
-    $[4] = title;
-  } else {
-    auxiliaryText = $[1];
-    props = $[2];
-    t1 = $[3];
-    title = $[4];
-  }
-  const variant = t1 === undefined ? "subtle" : t1;
-  let t2;
-  if ($[5] !== auxiliaryText) {
-    t2 = auxiliaryText && /*#__PURE__*/jsxRuntime.jsx("span", {
-      children: auxiliaryText
-    });
-    $[5] = auxiliaryText;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] !== props || $[8] !== t2 || $[9] !== title || $[10] !== variant) {
-    t3 = /*#__PURE__*/jsxRuntime.jsxs(StyledHeader, {
-      role: "heading",
-      variant: variant,
-      ...props,
-      children: [title, t2]
-    });
-    $[7] = props;
-    $[8] = t2;
-    $[9] = title;
-    $[10] = variant;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  return t3;
-}
-
-exports.Header = Header;
-exports.StyledHeader = StyledHeader;