@wistia/ui 0.13.1-beta.dfa62396.22fa8d9 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +6 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +57 -61
- package/dist/index.d.ts +57 -61
- package/dist/index.mjs +6 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1528,62 +1528,6 @@ declare const Divider: {
|
|
|
1528
1528
|
displayName: string;
|
|
1529
1529
|
};
|
|
1530
1530
|
|
|
1531
|
-
type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
|
|
1532
|
-
declare const variantStyleMap$1: {
|
|
1533
|
-
hero: styled_components.FlattenSimpleInterpolation;
|
|
1534
|
-
heading1: styled_components.FlattenSimpleInterpolation;
|
|
1535
|
-
heading2: styled_components.FlattenSimpleInterpolation;
|
|
1536
|
-
heading3: styled_components.FlattenSimpleInterpolation;
|
|
1537
|
-
heading4: styled_components.FlattenSimpleInterpolation;
|
|
1538
|
-
heading5: styled_components.FlattenSimpleInterpolation;
|
|
1539
|
-
heading6: styled_components.FlattenSimpleInterpolation;
|
|
1540
|
-
};
|
|
1541
|
-
declare const DEFAULT_ELEMENT = "h1";
|
|
1542
|
-
type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
|
|
1543
|
-
/**
|
|
1544
|
-
* The horizontal alignment
|
|
1545
|
-
* <br />
|
|
1546
|
-
* _Note: this only affects block elements_
|
|
1547
|
-
*/
|
|
1548
|
-
align?: AlignmentTypes$1;
|
|
1549
|
-
/**
|
|
1550
|
-
* The content of the heading
|
|
1551
|
-
*/
|
|
1552
|
-
children: ReactNode;
|
|
1553
|
-
/**
|
|
1554
|
-
* Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
|
|
1555
|
-
*/
|
|
1556
|
-
colorScheme?: ColorSchemeTypes;
|
|
1557
|
-
/**
|
|
1558
|
-
* Styles to text as disabled
|
|
1559
|
-
*/
|
|
1560
|
-
disabled?: boolean;
|
|
1561
|
-
/**
|
|
1562
|
-
* Display the text as inline content
|
|
1563
|
-
*/
|
|
1564
|
-
inline?: boolean;
|
|
1565
|
-
/**
|
|
1566
|
-
* Prevents text from being highlighted and copied
|
|
1567
|
-
*/
|
|
1568
|
-
preventUserSelect?: boolean;
|
|
1569
|
-
renderAs?: ElementType;
|
|
1570
|
-
/**
|
|
1571
|
-
* Number of lines to display before truncating with an ellipsis.
|
|
1572
|
-
* Set to 1 to truncate after a single line, 2 for two lines, etc.
|
|
1573
|
-
* <br />
|
|
1574
|
-
* _Note: this only affects block elements_
|
|
1575
|
-
*/
|
|
1576
|
-
truncate?: number;
|
|
1577
|
-
/**
|
|
1578
|
-
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
|
|
1579
|
-
*/
|
|
1580
|
-
variant?: keyof typeof variantStyleMap$1;
|
|
1581
|
-
};
|
|
1582
|
-
/**
|
|
1583
|
-
* Displaying heading text, both visually and semantically
|
|
1584
|
-
*/
|
|
1585
|
-
declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1586
|
-
|
|
1587
1531
|
type EditableHeadingProps = {
|
|
1588
1532
|
/**
|
|
1589
1533
|
* The initial text content of the heading.
|
|
@@ -1608,10 +1552,6 @@ type EditableHeadingProps = {
|
|
|
1608
1552
|
* Sets an aria-label for the input and label for the screen reader only button.
|
|
1609
1553
|
*/
|
|
1610
1554
|
ariaLabel?: string;
|
|
1611
|
-
/**
|
|
1612
|
-
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
|
|
1613
|
-
*/
|
|
1614
|
-
variant?: HeadingProps['variant'];
|
|
1615
1555
|
/**
|
|
1616
1556
|
* Force editing state for testing purposes
|
|
1617
1557
|
* @ignore
|
|
@@ -1629,7 +1569,7 @@ type EditableHeadingProps = {
|
|
|
1629
1569
|
* an accessible button that enables editing mode. The component handles empty values, keyboard
|
|
1630
1570
|
* navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
|
|
1631
1571
|
*/
|
|
1632
|
-
declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel,
|
|
1572
|
+
declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
|
|
1633
1573
|
|
|
1634
1574
|
type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
|
|
1635
1575
|
/**
|
|
@@ -1832,6 +1772,62 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
1832
1772
|
};
|
|
1833
1773
|
declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1834
1774
|
|
|
1775
|
+
type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
|
|
1776
|
+
declare const variantStyleMap$1: {
|
|
1777
|
+
hero: styled_components.FlattenSimpleInterpolation;
|
|
1778
|
+
heading1: styled_components.FlattenSimpleInterpolation;
|
|
1779
|
+
heading2: styled_components.FlattenSimpleInterpolation;
|
|
1780
|
+
heading3: styled_components.FlattenSimpleInterpolation;
|
|
1781
|
+
heading4: styled_components.FlattenSimpleInterpolation;
|
|
1782
|
+
heading5: styled_components.FlattenSimpleInterpolation;
|
|
1783
|
+
heading6: styled_components.FlattenSimpleInterpolation;
|
|
1784
|
+
};
|
|
1785
|
+
declare const DEFAULT_ELEMENT = "h1";
|
|
1786
|
+
type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
|
|
1787
|
+
/**
|
|
1788
|
+
* The horizontal alignment
|
|
1789
|
+
* <br />
|
|
1790
|
+
* _Note: this only affects block elements_
|
|
1791
|
+
*/
|
|
1792
|
+
align?: AlignmentTypes$1;
|
|
1793
|
+
/**
|
|
1794
|
+
* The content of the heading
|
|
1795
|
+
*/
|
|
1796
|
+
children: ReactNode;
|
|
1797
|
+
/**
|
|
1798
|
+
* Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
|
|
1799
|
+
*/
|
|
1800
|
+
colorScheme?: ColorSchemeTypes;
|
|
1801
|
+
/**
|
|
1802
|
+
* Styles to text as disabled
|
|
1803
|
+
*/
|
|
1804
|
+
disabled?: boolean;
|
|
1805
|
+
/**
|
|
1806
|
+
* Display the text as inline content
|
|
1807
|
+
*/
|
|
1808
|
+
inline?: boolean;
|
|
1809
|
+
/**
|
|
1810
|
+
* Prevents text from being highlighted and copied
|
|
1811
|
+
*/
|
|
1812
|
+
preventUserSelect?: boolean;
|
|
1813
|
+
renderAs?: ElementType;
|
|
1814
|
+
/**
|
|
1815
|
+
* Number of lines to display before truncating with an ellipsis.
|
|
1816
|
+
* Set to 1 to truncate after a single line, 2 for two lines, etc.
|
|
1817
|
+
* <br />
|
|
1818
|
+
* _Note: this only affects block elements_
|
|
1819
|
+
*/
|
|
1820
|
+
truncate?: number;
|
|
1821
|
+
/**
|
|
1822
|
+
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
|
|
1823
|
+
*/
|
|
1824
|
+
variant?: keyof typeof variantStyleMap$1;
|
|
1825
|
+
};
|
|
1826
|
+
/**
|
|
1827
|
+
* Displaying heading text, both visually and semantically
|
|
1828
|
+
*/
|
|
1829
|
+
declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1830
|
+
|
|
1835
1831
|
type IconButtonProps = {
|
|
1836
1832
|
/**
|
|
1837
1833
|
* Accessible text for screen readers.
|
package/dist/index.d.ts
CHANGED
|
@@ -1528,62 +1528,6 @@ declare const Divider: {
|
|
|
1528
1528
|
displayName: string;
|
|
1529
1529
|
};
|
|
1530
1530
|
|
|
1531
|
-
type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
|
|
1532
|
-
declare const variantStyleMap$1: {
|
|
1533
|
-
hero: styled_components.FlattenSimpleInterpolation;
|
|
1534
|
-
heading1: styled_components.FlattenSimpleInterpolation;
|
|
1535
|
-
heading2: styled_components.FlattenSimpleInterpolation;
|
|
1536
|
-
heading3: styled_components.FlattenSimpleInterpolation;
|
|
1537
|
-
heading4: styled_components.FlattenSimpleInterpolation;
|
|
1538
|
-
heading5: styled_components.FlattenSimpleInterpolation;
|
|
1539
|
-
heading6: styled_components.FlattenSimpleInterpolation;
|
|
1540
|
-
};
|
|
1541
|
-
declare const DEFAULT_ELEMENT = "h1";
|
|
1542
|
-
type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
|
|
1543
|
-
/**
|
|
1544
|
-
* The horizontal alignment
|
|
1545
|
-
* <br />
|
|
1546
|
-
* _Note: this only affects block elements_
|
|
1547
|
-
*/
|
|
1548
|
-
align?: AlignmentTypes$1;
|
|
1549
|
-
/**
|
|
1550
|
-
* The content of the heading
|
|
1551
|
-
*/
|
|
1552
|
-
children: ReactNode;
|
|
1553
|
-
/**
|
|
1554
|
-
* Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
|
|
1555
|
-
*/
|
|
1556
|
-
colorScheme?: ColorSchemeTypes;
|
|
1557
|
-
/**
|
|
1558
|
-
* Styles to text as disabled
|
|
1559
|
-
*/
|
|
1560
|
-
disabled?: boolean;
|
|
1561
|
-
/**
|
|
1562
|
-
* Display the text as inline content
|
|
1563
|
-
*/
|
|
1564
|
-
inline?: boolean;
|
|
1565
|
-
/**
|
|
1566
|
-
* Prevents text from being highlighted and copied
|
|
1567
|
-
*/
|
|
1568
|
-
preventUserSelect?: boolean;
|
|
1569
|
-
renderAs?: ElementType;
|
|
1570
|
-
/**
|
|
1571
|
-
* Number of lines to display before truncating with an ellipsis.
|
|
1572
|
-
* Set to 1 to truncate after a single line, 2 for two lines, etc.
|
|
1573
|
-
* <br />
|
|
1574
|
-
* _Note: this only affects block elements_
|
|
1575
|
-
*/
|
|
1576
|
-
truncate?: number;
|
|
1577
|
-
/**
|
|
1578
|
-
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
|
|
1579
|
-
*/
|
|
1580
|
-
variant?: keyof typeof variantStyleMap$1;
|
|
1581
|
-
};
|
|
1582
|
-
/**
|
|
1583
|
-
* Displaying heading text, both visually and semantically
|
|
1584
|
-
*/
|
|
1585
|
-
declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1586
|
-
|
|
1587
1531
|
type EditableHeadingProps = {
|
|
1588
1532
|
/**
|
|
1589
1533
|
* The initial text content of the heading.
|
|
@@ -1608,10 +1552,6 @@ type EditableHeadingProps = {
|
|
|
1608
1552
|
* Sets an aria-label for the input and label for the screen reader only button.
|
|
1609
1553
|
*/
|
|
1610
1554
|
ariaLabel?: string;
|
|
1611
|
-
/**
|
|
1612
|
-
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the renderAs prop is used
|
|
1613
|
-
*/
|
|
1614
|
-
variant?: HeadingProps['variant'];
|
|
1615
1555
|
/**
|
|
1616
1556
|
* Force editing state for testing purposes
|
|
1617
1557
|
* @ignore
|
|
@@ -1629,7 +1569,7 @@ type EditableHeadingProps = {
|
|
|
1629
1569
|
* an accessible button that enables editing mode. The component handles empty values, keyboard
|
|
1630
1570
|
* navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
|
|
1631
1571
|
*/
|
|
1632
|
-
declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel,
|
|
1572
|
+
declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
|
|
1633
1573
|
|
|
1634
1574
|
type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
|
|
1635
1575
|
/**
|
|
@@ -1832,6 +1772,62 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
1832
1772
|
};
|
|
1833
1773
|
declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1834
1774
|
|
|
1775
|
+
type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
|
|
1776
|
+
declare const variantStyleMap$1: {
|
|
1777
|
+
hero: styled_components.FlattenSimpleInterpolation;
|
|
1778
|
+
heading1: styled_components.FlattenSimpleInterpolation;
|
|
1779
|
+
heading2: styled_components.FlattenSimpleInterpolation;
|
|
1780
|
+
heading3: styled_components.FlattenSimpleInterpolation;
|
|
1781
|
+
heading4: styled_components.FlattenSimpleInterpolation;
|
|
1782
|
+
heading5: styled_components.FlattenSimpleInterpolation;
|
|
1783
|
+
heading6: styled_components.FlattenSimpleInterpolation;
|
|
1784
|
+
};
|
|
1785
|
+
declare const DEFAULT_ELEMENT = "h1";
|
|
1786
|
+
type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
|
|
1787
|
+
/**
|
|
1788
|
+
* The horizontal alignment
|
|
1789
|
+
* <br />
|
|
1790
|
+
* _Note: this only affects block elements_
|
|
1791
|
+
*/
|
|
1792
|
+
align?: AlignmentTypes$1;
|
|
1793
|
+
/**
|
|
1794
|
+
* The content of the heading
|
|
1795
|
+
*/
|
|
1796
|
+
children: ReactNode;
|
|
1797
|
+
/**
|
|
1798
|
+
* Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
|
|
1799
|
+
*/
|
|
1800
|
+
colorScheme?: ColorSchemeTypes;
|
|
1801
|
+
/**
|
|
1802
|
+
* Styles to text as disabled
|
|
1803
|
+
*/
|
|
1804
|
+
disabled?: boolean;
|
|
1805
|
+
/**
|
|
1806
|
+
* Display the text as inline content
|
|
1807
|
+
*/
|
|
1808
|
+
inline?: boolean;
|
|
1809
|
+
/**
|
|
1810
|
+
* Prevents text from being highlighted and copied
|
|
1811
|
+
*/
|
|
1812
|
+
preventUserSelect?: boolean;
|
|
1813
|
+
renderAs?: ElementType;
|
|
1814
|
+
/**
|
|
1815
|
+
* Number of lines to display before truncating with an ellipsis.
|
|
1816
|
+
* Set to 1 to truncate after a single line, 2 for two lines, etc.
|
|
1817
|
+
* <br />
|
|
1818
|
+
* _Note: this only affects block elements_
|
|
1819
|
+
*/
|
|
1820
|
+
truncate?: number;
|
|
1821
|
+
/**
|
|
1822
|
+
* The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
|
|
1823
|
+
*/
|
|
1824
|
+
variant?: keyof typeof variantStyleMap$1;
|
|
1825
|
+
};
|
|
1826
|
+
/**
|
|
1827
|
+
* Displaying heading text, both visually and semantically
|
|
1828
|
+
*/
|
|
1829
|
+
declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
|
|
1830
|
+
|
|
1835
1831
|
type IconButtonProps = {
|
|
1836
1832
|
/**
|
|
1837
1833
|
* Accessible text for screen readers.
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.13.1
|
|
3
|
+
* @license @wistia/ui v0.13.1
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -10550,13 +10550,11 @@ var StyledInput = styled39(Input)`
|
|
|
10550
10550
|
}
|
|
10551
10551
|
|
|
10552
10552
|
&& {
|
|
10553
|
-
|
|
10554
|
-
|
|
10555
|
-
--wui-input-
|
|
10556
|
-
--wui-input-font-weight: var(--font-weight);
|
|
10557
|
-
--wui-input-line-height: var(--line-height);
|
|
10553
|
+
--wui-input-font-size: var(--wui-typography-heading-1-size);
|
|
10554
|
+
--wui-input-font-weight: var(--wui-typography-heading-1-weight);
|
|
10555
|
+
--wui-input-line-height: var(--wui-typography-heading-1-line-height);
|
|
10558
10556
|
|
|
10559
|
-
font-family: var(--
|
|
10557
|
+
font-family: var(--wui-typography-heading-1-family);
|
|
10560
10558
|
width: 100%;
|
|
10561
10559
|
padding: var(--wui-space-02);
|
|
10562
10560
|
border: none;
|
|
@@ -10588,7 +10586,6 @@ var EditableHeading = ({
|
|
|
10588
10586
|
onEditingChange,
|
|
10589
10587
|
tooltipText = "Click to edit title",
|
|
10590
10588
|
ariaLabel = "Edit title",
|
|
10591
|
-
variant = "heading1",
|
|
10592
10589
|
__forceEditing = false,
|
|
10593
10590
|
editingDisabled = false
|
|
10594
10591
|
}) => {
|
|
@@ -10635,7 +10632,7 @@ var EditableHeading = ({
|
|
|
10635
10632
|
ref: headingRef,
|
|
10636
10633
|
$editingDisabled: editingDisabled,
|
|
10637
10634
|
onClick: () => handleSetEditing(true),
|
|
10638
|
-
variant,
|
|
10635
|
+
variant: "heading1",
|
|
10639
10636
|
children: value
|
|
10640
10637
|
}
|
|
10641
10638
|
);
|
|
@@ -10647,7 +10644,6 @@ var EditableHeading = ({
|
|
|
10647
10644
|
StyledInput,
|
|
10648
10645
|
{
|
|
10649
10646
|
$height: headingHeight,
|
|
10650
|
-
$variant: variant,
|
|
10651
10647
|
autoFocus: true,
|
|
10652
10648
|
fullWidth: true,
|
|
10653
10649
|
onBlur: handleFinishEditing,
|