@astral/ui 4.22.0 → 4.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/CardGridInfinite/Card/Card.js +2 -3
  2. package/components/CardGridInfinite/Card/styles.d.ts +3 -0
  3. package/components/CardGridInfinite/Card/styles.js +8 -0
  4. package/components/CardGridInfinite/CardGridMainActions/styles.js +1 -0
  5. package/node/components/CardGridInfinite/Card/Card.js +1 -2
  6. package/node/components/CardGridInfinite/Card/styles.d.ts +3 -0
  7. package/node/components/CardGridInfinite/Card/styles.js +9 -1
  8. package/node/components/CardGridInfinite/CardGridMainActions/styles.js +1 -0
  9. package/package.json +1 -1
package/components/CardGridInfinite/Card/Card.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Paper } from '../../Paper';
3
2
  import { Tooltip } from '../../Tooltip';
4
3
  import { getInertProps } from '../../utils/getInertProps';
5
4
  import { CardActionContextProvider } from './CardActionContext';
6
5
  import { SecondaryActionButton } from './SecondaryActionButton';
7
- import { CardHeader, HeaderWrapper, StyledDivider, Wrapper } from './styles';
6
+ import { CardHeader, HeaderWrapper, StyledDivider, StyledPaper, Wrapper, } from './styles';
8
7
  import { useLogic } from './useLogic';
9
8
  export const Card = (props) => {
10
9
  const { handleActionClick } = useLogic(props);
11
10
  const { isDisabled, mainActions: MainActions, content, header, disabledReason, secondaryActions, } = props;
12
- return (_jsx(CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: _jsx(Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: _jsx(Paper, { variant: "outlined", ...getInertProps(isDisabled), children: _jsxs(Wrapper, { children: [header && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(HeaderWrapper, { children: header }), secondaryActions && (_jsx(SecondaryActionButton, { renderActions: secondaryActions }))] }), _jsx(StyledDivider, {})] })), content, MainActions && _jsx(MainActions, {})] }) }) }) }));
11
+ return (_jsx(CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: _jsx(Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: _jsx(StyledPaper, { variant: "outlined", ...getInertProps(isDisabled), children: _jsxs(Wrapper, { children: [header && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(HeaderWrapper, { children: header }), secondaryActions && (_jsx(SecondaryActionButton, { renderActions: secondaryActions }))] }), _jsx(StyledDivider, {})] })), content, MainActions && _jsx(MainActions, {})] }) }) }) }));
13
12
  };
package/components/CardGridInfinite/Card/styles.d.ts CHANGED
@@ -14,3 +14,6 @@ export declare const HeaderWrapper: import("../../styled").StyledComponent<{
14
14
  theme?: import("@emotion/react").Theme | undefined;
15
15
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
16
16
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
17
+ export declare const StyledPaper: import("../../styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
18
+ theme?: import("@emotion/react").Theme | undefined;
19
+ }, {}, {}>;
package/components/CardGridInfinite/Card/styles.js CHANGED
@@ -1,6 +1,11 @@
1
1
  import { Divider } from '../../Divider';
2
+ import { Paper } from '../../Paper';
2
3
  import { styled } from '../../styled';
3
4
  export const Wrapper = styled.div `
5
+ display: flex;
6
+ flex-direction: column;
7
+
8
+ height: 100%;
4
9
  padding: ${({ theme }) => theme.spacing(4, 5)};
5
10
 
6
11
  ${({ theme }) => theme.breakpoints.down('sm')} {
@@ -20,3 +25,6 @@ export const HeaderWrapper = styled.div `
20
25
  overflow: hidden;
21
26
  flex: 1;
22
27
  `;
28
+ export const StyledPaper = styled(Paper) `
29
+ height: 100%;
30
+ `;
package/components/CardGridInfinite/CardGridMainActions/styles.js CHANGED
@@ -5,5 +5,6 @@ export const Wrapper = styled.div `
5
5
  grid-auto-flow: column;
6
6
  gap: ${({ theme }) => theme.spacing(3)};
7
7
 
8
+ margin-top: auto;
8
9
  padding-top: ${({ theme }) => theme.spacing(6)};
9
10
  `;
package/node/components/CardGridInfinite/Card/Card.js CHANGED
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Card = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const Paper_1 = require("../../Paper");
6
5
  const Tooltip_1 = require("../../Tooltip");
7
6
  const getInertProps_1 = require("../../utils/getInertProps");
8
7
  const CardActionContext_1 = require("./CardActionContext");
@@ -12,6 +11,6 @@ const useLogic_1 = require("./useLogic");
12
11
  const Card = (props) => {
13
12
  const { handleActionClick } = (0, useLogic_1.useLogic)(props);
14
13
  const { isDisabled, mainActions: MainActions, content, header, disabledReason, secondaryActions, } = props;
15
- return ((0, jsx_runtime_1.jsx)(CardActionContext_1.CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", ...(0, getInertProps_1.getInertProps)(isDisabled), children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderWrapper, { children: header }), secondaryActions && ((0, jsx_runtime_1.jsx)(SecondaryActionButton_1.SecondaryActionButton, { renderActions: secondaryActions }))] }), (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), content, MainActions && (0, jsx_runtime_1.jsx)(MainActions, {})] }) }) }) }));
14
+ return ((0, jsx_runtime_1.jsx)(CardActionContext_1.CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", ...(0, getInertProps_1.getInertProps)(isDisabled), children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderWrapper, { children: header }), secondaryActions && ((0, jsx_runtime_1.jsx)(SecondaryActionButton_1.SecondaryActionButton, { renderActions: secondaryActions }))] }), (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), content, MainActions && (0, jsx_runtime_1.jsx)(MainActions, {})] }) }) }) }));
16
15
  };
17
16
  exports.Card = Card;
package/node/components/CardGridInfinite/Card/styles.d.ts CHANGED
@@ -14,3 +14,6 @@ export declare const HeaderWrapper: import("@emotion/styled/dist/declarations/sr
14
14
  theme?: import("@emotion/react").Theme | undefined;
15
15
  as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
16
16
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
17
+ export declare const StyledPaper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
18
+ theme?: import("@emotion/react").Theme | undefined;
19
+ }, {}, {}>;
package/node/components/CardGridInfinite/Card/styles.js CHANGED
@@ -1,9 +1,14 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.HeaderWrapper = exports.CardHeader = exports.StyledDivider = exports.Wrapper = void 0;
3
+ exports.StyledPaper = exports.HeaderWrapper = exports.CardHeader = exports.StyledDivider = exports.Wrapper = void 0;
4
4
  const Divider_1 = require("../../Divider");
5
+ const Paper_1 = require("../../Paper");
5
6
  const styled_1 = require("../../styled");
6
7
  exports.Wrapper = styled_1.styled.div `
8
+ display: flex;
9
+ flex-direction: column;
10
+
11
+ height: 100%;
7
12
  padding: ${({ theme }) => theme.spacing(4, 5)};
8
13
 
9
14
  ${({ theme }) => theme.breakpoints.down('sm')} {
@@ -23,3 +28,6 @@ exports.HeaderWrapper = styled_1.styled.div `
23
28
  overflow: hidden;
24
29
  flex: 1;
25
30
  `;
31
+ exports.StyledPaper = (0, styled_1.styled)(Paper_1.Paper) `
32
+ height: 100%;
33
+ `;
package/node/components/CardGridInfinite/CardGridMainActions/styles.js CHANGED
@@ -8,5 +8,6 @@ exports.Wrapper = styled_1.styled.div `
8
8
  grid-auto-flow: column;
9
9
  gap: ${({ theme }) => theme.spacing(3)};
10
10
 
11
+ margin-top: auto;
11
12
  padding-top: ${({ theme }) => theme.spacing(6)};
12
13
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.22.0",
3
+ "version": "4.22.1",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {