@elliemae/ds-ribbon 3.80.0-next.19 → 3.80.0-next.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/DSRibbonRow/DSRibbonRow.js +10 -3
- package/dist/cjs/parts/DSRibbonRow/DSRibbonRow.js.map +2 -2
- package/dist/cjs/parts/DSRibbonRow/react-desc-prop-types.js +6 -2
- package/dist/cjs/parts/DSRibbonRow/react-desc-prop-types.js.map +2 -2
- package/dist/esm/parts/DSRibbonRow/DSRibbonRow.js +11 -4
- package/dist/esm/parts/DSRibbonRow/DSRibbonRow.js.map +2 -2
- package/dist/esm/parts/DSRibbonRow/react-desc-prop-types.js +6 -2
- package/dist/esm/parts/DSRibbonRow/react-desc-prop-types.js.map +2 -2
- package/dist/types/parts/DSRibbonRow/react-desc-prop-types.d.ts +1 -0
- package/package.json +6 -6
|
@@ -40,6 +40,13 @@ var import_react = __toESM(require("react"));
|
|
|
40
40
|
var import_useRibbonRow = require("./config/useRibbonRow.js");
|
|
41
41
|
var import_constants = require("./constants/index.js");
|
|
42
42
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
43
|
+
const wrapColumnsStyles = import_ds_system.css`
|
|
44
|
+
flex-wrap: wrap;
|
|
45
|
+
`;
|
|
46
|
+
const scrollColumnsStyles = import_ds_system.css`
|
|
47
|
+
flex-wrap: nowrap;
|
|
48
|
+
overflow-x: auto;
|
|
49
|
+
`;
|
|
43
50
|
const StyledFlexRow = (0, import_ds_system.styled)("div", {
|
|
44
51
|
name: import_constants.DSRibbonName,
|
|
45
52
|
slot: import_constants.RIBBON_ROW_SLOTS.RIBBON_ROW
|
|
@@ -53,8 +60,7 @@ const StyledFlexRow = (0, import_ds_system.styled)("div", {
|
|
|
53
60
|
height: 5rem;
|
|
54
61
|
overflow-y: hidden;
|
|
55
62
|
}
|
|
56
|
-
|
|
57
|
-
overflow-x: auto;
|
|
63
|
+
${({ $wrapColumns }) => $wrapColumns ? wrapColumnsStyles : scrollColumnsStyles};
|
|
58
64
|
${(props) => {
|
|
59
65
|
if (props.$alignLeft) {
|
|
60
66
|
return `
|
|
@@ -89,7 +95,7 @@ const StyledFlexRow = (0, import_ds_system.styled)("div", {
|
|
|
89
95
|
`;
|
|
90
96
|
const DSRibbonRow = (props) => {
|
|
91
97
|
const { propsWithDefault, xstyledProps, globalProps } = (0, import_useRibbonRow.useRibbonRow)(props);
|
|
92
|
-
const { children, solid, alignLeft } = propsWithDefault;
|
|
98
|
+
const { children, solid, alignLeft, wrapColumns } = propsWithDefault;
|
|
93
99
|
const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
94
100
|
const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
|
|
95
101
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -99,6 +105,7 @@ const DSRibbonRow = (props) => {
|
|
|
99
105
|
...xstyledProps,
|
|
100
106
|
$alignLeft: alignLeft,
|
|
101
107
|
$solid: solid,
|
|
108
|
+
$wrapColumns: wrapColumns,
|
|
102
109
|
getOwnerProps,
|
|
103
110
|
getOwnerPropsArguments,
|
|
104
111
|
children
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSRibbonRow/DSRibbonRow.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\ntype StyledFlexRowProps = {\n $alignLeft: DSRibbonRowT.Props['alignLeft'];\n $solid: DSRibbonRowT.Props['solid'];\n};\nconst StyledFlexRow = styled('div', {\n name: DSRibbonName,\n slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\nconst wrapColumnsStyles = css`\n flex-wrap: wrap;\n`;\nconst scrollColumnsStyles = css`\n flex-wrap: nowrap;\n overflow-x: auto;\n`;\n\ntype StyledFlexRowProps = {\n $alignLeft: DSRibbonRowT.Props['alignLeft'];\n $solid: DSRibbonRowT.Props['solid'];\n $wrapColumns: DSRibbonRowT.Props['wrapColumns'];\n};\nconst StyledFlexRow = styled('div', {\n name: DSRibbonName,\n slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n ${({ $wrapColumns }) => ($wrapColumns ? wrapColumnsStyles : scrollColumnsStyles)};\n ${(props) => {\n if (props.$alignLeft) {\n return `\n align-items: stretch;\n & > .DSRibbon-ribbon-col {\n align-items: flex-start;\n align-self: stretch; \n flex: 0;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex: 1;\n }\n `;\n }\n return `\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.$solid) {\n return `\n & > .DSRibbon-ribbon-col {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n const { children, solid, alignLeft, wrapColumns } = propsWithDefault;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFlexRow\n {...globalProps}\n {...xstyledProps}\n $alignLeft={alignLeft}\n $solid={solid}\n $wrapColumns={wrapColumns}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledFlexRow>\n );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EnB;AA1EJ,8BAAyB;AACzB,uBAAgD;AAChD,mBAAkB;AAClB,0BAA6B;AAC7B,uBAA+C;AAC/C,mCAA8D;AAE9D,MAAM,oBAAoB;AAAA;AAAA;AAG1B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAU5B,MAAM,oBAAgB,yBAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,aAAa,MAAO,eAAe,oBAAoB,mBAAoB;AAAA,IAC9E,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,mCAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,QAAI,kCAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,YAAY,IAAI;AACpD,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,4BAAwB,kCAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -38,7 +38,8 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
38
38
|
var import_constants = require("./constants/index.js");
|
|
39
39
|
const defaultProps = {
|
|
40
40
|
alignLeft: false,
|
|
41
|
-
solid: false
|
|
41
|
+
solid: false,
|
|
42
|
+
wrapColumns: false
|
|
42
43
|
};
|
|
43
44
|
const DSRibbonRowPropTypes = {
|
|
44
45
|
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSRibbonName, import_constants.RIBBON_ROW_SLOTS),
|
|
@@ -47,7 +48,10 @@ const DSRibbonRowPropTypes = {
|
|
|
47
48
|
alignLeft: import_ds_props_helpers.PropTypes.bool.description(
|
|
48
49
|
"If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column."
|
|
49
50
|
),
|
|
50
|
-
solid: import_ds_props_helpers.PropTypes.bool.description("If true, the dashed border between columns will be solid.")
|
|
51
|
+
solid: import_ds_props_helpers.PropTypes.bool.description("If true, the dashed border between columns will be solid."),
|
|
52
|
+
wrapColumns: import_ds_props_helpers.PropTypes.bool.description(
|
|
53
|
+
"If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit."
|
|
54
|
+
).defaultValue("false")
|
|
51
55
|
};
|
|
52
56
|
const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes;
|
|
53
57
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSRibbonRow/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n alignLeft: boolean;\n solid: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_ROW_SLOTS\n > {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n alignLeft: false,\n solid: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n alignLeft: PropTypes.bool.description(\n 'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n ),\n solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA+C;
|
|
4
|
+
"sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n alignLeft: boolean;\n solid: boolean;\n wrapColumns: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_ROW_SLOTS\n > {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n alignLeft: false,\n solid: false,\n wrapColumns: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n alignLeft: PropTypes.bool.description(\n 'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n ),\n solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n wrapColumns: PropTypes.bool\n .description(\n 'If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit.',\n )\n .defaultValue('false'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA+C;AAgCxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACf;AAEO,MAAM,uBAA8D;AAAA,EACzE,OAAG,kDAAyB,+BAAc,iCAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,KAAK,YAAY,2DAA2D;AAAA,EAC7F,aAAa,kCAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,6BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
4
|
+
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
5
5
|
import React2 from "react";
|
|
6
6
|
import { useRibbonRow } from "./config/useRibbonRow.js";
|
|
7
7
|
import { DSRibbonName, RIBBON_ROW_SLOTS } from "./constants/index.js";
|
|
8
8
|
import { DSRibbonRowPropTypesSchema } from "./react-desc-prop-types.js";
|
|
9
|
+
const wrapColumnsStyles = css`
|
|
10
|
+
flex-wrap: wrap;
|
|
11
|
+
`;
|
|
12
|
+
const scrollColumnsStyles = css`
|
|
13
|
+
flex-wrap: nowrap;
|
|
14
|
+
overflow-x: auto;
|
|
15
|
+
`;
|
|
9
16
|
const StyledFlexRow = styled("div", {
|
|
10
17
|
name: DSRibbonName,
|
|
11
18
|
slot: RIBBON_ROW_SLOTS.RIBBON_ROW
|
|
@@ -19,8 +26,7 @@ const StyledFlexRow = styled("div", {
|
|
|
19
26
|
height: 5rem;
|
|
20
27
|
overflow-y: hidden;
|
|
21
28
|
}
|
|
22
|
-
|
|
23
|
-
overflow-x: auto;
|
|
29
|
+
${({ $wrapColumns }) => $wrapColumns ? wrapColumnsStyles : scrollColumnsStyles};
|
|
24
30
|
${(props) => {
|
|
25
31
|
if (props.$alignLeft) {
|
|
26
32
|
return `
|
|
@@ -55,7 +61,7 @@ const StyledFlexRow = styled("div", {
|
|
|
55
61
|
`;
|
|
56
62
|
const DSRibbonRow = (props) => {
|
|
57
63
|
const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);
|
|
58
|
-
const { children, solid, alignLeft } = propsWithDefault;
|
|
64
|
+
const { children, solid, alignLeft, wrapColumns } = propsWithDefault;
|
|
59
65
|
const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
60
66
|
const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
|
|
61
67
|
return /* @__PURE__ */ jsx(
|
|
@@ -65,6 +71,7 @@ const DSRibbonRow = (props) => {
|
|
|
65
71
|
...xstyledProps,
|
|
66
72
|
$alignLeft: alignLeft,
|
|
67
73
|
$solid: solid,
|
|
74
|
+
$wrapColumns: wrapColumns,
|
|
68
75
|
getOwnerProps,
|
|
69
76
|
getOwnerPropsArguments,
|
|
70
77
|
children
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonRow/DSRibbonRow.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\ntype StyledFlexRowProps = {\n $alignLeft: DSRibbonRowT.Props['alignLeft'];\n $solid: DSRibbonRowT.Props['solid'];\n};\nconst StyledFlexRow = styled('div', {\n name: DSRibbonName,\n slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport { useRibbonRow } from './config/useRibbonRow.js';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\nimport { type DSRibbonRowT, DSRibbonRowPropTypesSchema } from './react-desc-prop-types.js';\n\nconst wrapColumnsStyles = css`\n flex-wrap: wrap;\n`;\nconst scrollColumnsStyles = css`\n flex-wrap: nowrap;\n overflow-x: auto;\n`;\n\ntype StyledFlexRowProps = {\n $alignLeft: DSRibbonRowT.Props['alignLeft'];\n $solid: DSRibbonRowT.Props['solid'];\n $wrapColumns: DSRibbonRowT.Props['wrapColumns'];\n};\nconst StyledFlexRow = styled('div', {\n name: DSRibbonName,\n slot: RIBBON_ROW_SLOTS.RIBBON_ROW,\n})<StyledFlexRowProps>`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n min-height: 4rem;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n height: 5rem;\n overflow-y: hidden;\n }\n ${({ $wrapColumns }) => ($wrapColumns ? wrapColumnsStyles : scrollColumnsStyles)};\n ${(props) => {\n if (props.$alignLeft) {\n return `\n align-items: stretch;\n & > .DSRibbon-ribbon-col {\n align-items: flex-start;\n align-self: stretch; \n flex: 0;\n @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n flex: 1;\n }\n `;\n }\n return `\n align-items: center;\n `;\n }};\n ${(props) => {\n if (props.$solid) {\n return `\n & > .DSRibbon-ribbon-col {\n &:after{\n top: 0%;\n height: 100%;\n border-right: solid 1px #CBCFD7;\n }\n `;\n }\n return '';\n }};\n ${xStyledCommonProps}\n`;\n\nconst DSRibbonRow: React.ComponentType<DSRibbonRowT.Props> = (props) => {\n const { propsWithDefault, xstyledProps, globalProps } = useRibbonRow(props);\n const { children, solid, alignLeft, wrapColumns } = propsWithDefault;\n const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n return (\n <StyledFlexRow\n {...globalProps}\n {...xstyledProps}\n $alignLeft={alignLeft}\n $solid={solid}\n $wrapColumns={wrapColumns}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledFlexRow>\n );\n};\n\nDSRibbonRow.displayName = 'DSRibbonRow';\nconst DSRibbonRowWithSchema = describe(DSRibbonRow);\nDSRibbonRowWithSchema.propTypes = DSRibbonRowPropTypesSchema;\n\nexport { DSRibbonRow, DSRibbonRowWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC0EnB;AA1EJ,SAAS,gBAAgB;AACzB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,cAAc,wBAAwB;AAC/C,SAA4B,kCAAkC;AAE9D,MAAM,oBAAoB;AAAA;AAAA;AAG1B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAU5B,MAAM,gBAAgB,OAAO,OAAO;AAAA,EAClC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUG,CAAC,EAAE,aAAa,MAAO,eAAe,oBAAoB,mBAAoB;AAAA,IAC9E,CAAC,UAAU;AACX,MAAI,MAAM,YAAY;AACpB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AACA,SAAO;AAAA;AAAA;AAGT,CAAC;AAAA,IACC,CAAC,UAAU;AACX,MAAI,MAAM,QAAQ;AAChB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AACA,SAAO;AACT,CAAC;AAAA,IACC,kBAAkB;AAAA;AAGtB,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,cAAc,YAAY,IAAI,aAAa,KAAK;AAC1E,QAAM,EAAE,UAAU,OAAO,WAAW,YAAY,IAAI;AACpD,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -8,7 +8,8 @@ import {
|
|
|
8
8
|
import { DSRibbonName, RIBBON_ROW_SLOTS } from "./constants/index.js";
|
|
9
9
|
const defaultProps = {
|
|
10
10
|
alignLeft: false,
|
|
11
|
-
solid: false
|
|
11
|
+
solid: false,
|
|
12
|
+
wrapColumns: false
|
|
12
13
|
};
|
|
13
14
|
const DSRibbonRowPropTypes = {
|
|
14
15
|
...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),
|
|
@@ -17,7 +18,10 @@ const DSRibbonRowPropTypes = {
|
|
|
17
18
|
alignLeft: PropTypes.bool.description(
|
|
18
19
|
"If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column."
|
|
19
20
|
),
|
|
20
|
-
solid: PropTypes.bool.description("If true, the dashed border between columns will be solid.")
|
|
21
|
+
solid: PropTypes.bool.description("If true, the dashed border between columns will be solid."),
|
|
22
|
+
wrapColumns: PropTypes.bool.description(
|
|
23
|
+
"If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit."
|
|
24
|
+
).defaultValue("false")
|
|
21
25
|
};
|
|
22
26
|
const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes;
|
|
23
27
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSRibbonRow/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n alignLeft: boolean;\n solid: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_ROW_SLOTS\n > {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n alignLeft: false,\n solid: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n alignLeft: PropTypes.bool.description(\n 'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n ),\n solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSRibbonName, RIBBON_ROW_SLOTS } from './constants/index.js';\n\nexport declare namespace DSRibbonRowT {\n export interface RequiredProps {}\n\n export interface DefaultProps {\n alignLeft: boolean;\n solid: boolean;\n wrapColumns: boolean;\n }\n\n export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSRibbonName,\n typeof RIBBON_ROW_SLOTS\n > {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSRibbonRowT.DefaultProps = {\n alignLeft: false,\n solid: false,\n wrapColumns: false,\n};\n\nexport const DSRibbonRowPropTypes: DSPropTypesSchema<DSRibbonRowT.Props> = {\n ...getPropsPerSlotPropTypes(DSRibbonName, RIBBON_ROW_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n alignLeft: PropTypes.bool.description(\n 'If true, the content will be aligned to the left and the row will stretch to fill the height of the tallest column.',\n ),\n solid: PropTypes.bool.description('If true, the dashed border between columns will be solid.'),\n wrapColumns: PropTypes.bool\n .description(\n 'If true, the columns wrap onto the next line instead of scrolling horizontally when they no longer fit.',\n )\n .defaultValue('false'),\n};\n\nexport const DSRibbonRowPropTypesSchema = DSRibbonRowPropTypes as unknown as ValidationMap<DSRibbonRowT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB;AAgCxC,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACf;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,cAAc,gBAAgB;AAAA,EAC1D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,OAAO,UAAU,KAAK,YAAY,2DAA2D;AAAA,EAC7F,aAAa,UAAU,KACpB;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AACzB;AAEO,MAAM,6BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-ribbon",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Ribbon",
|
|
6
6
|
"files": [
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.20",
|
|
40
|
+
"@elliemae/ds-system": "3.80.0-next.20"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
44
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
45
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
43
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.20",
|
|
44
|
+
"@elliemae/ds-test-utils": "3.80.0-next.20",
|
|
45
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.20",
|
|
46
46
|
"jest": "^30.0.0",
|
|
47
47
|
"styled-components": "~5.3.11"
|
|
48
48
|
},
|