@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Summary/SummaryContext.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-type SummaryContextValue = {
-    breakpoint: number;
-};
-export declare function useSummaryContext(): SummaryContextValue;
-export declare const SummaryContextProvider: React.FC<React.PropsWithChildren<SummaryContextValue>>;
-export {};
+import React from "react";
+type SummaryContextValue = {
+    breakpoint: number;
+};
+export declare function useSummaryContext(): SummaryContextValue;
+export declare const SummaryContextProvider: React.FC<React.PropsWithChildren<SummaryContextValue>>;
+export {};

package/dist/src/Summary/SummaryContext.js

@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from "react";
+const SummaryContext = createContext(undefined);
+export function useSummaryContext() {
+    const context = useContext(SummaryContext);
+    if (!context) {
+        throw new Error(`Summary compound components cannot be rendered outside the Summary component`);
+    }
+    return context;
+}
+export const SummaryContextProvider = ({ breakpoint, children, }) => {
+    return (React.createElement(SummaryContext.Provider, { value: {
+            breakpoint,
+        } }, children));
+};

package/dist/src/Summary/SummaryDivider.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const SummaryDivider: (props: any) => React.JSX.Element;
-export default SummaryDivider;
+import React from "react";
+declare const SummaryDivider: (props: any) => React.JSX.Element;
+export default SummaryDivider;

package/dist/src/Summary/SummaryDivider.js

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+import { Box } from "../Box";
+import numberFromDimension from "../utils/numberFromDimension";
+import { useSummaryContext } from "./SummaryContext";
+const Divider = styled(Box)(({ theme, breakpoint }) => ({
+    display: "block",
+    alignSelf: "stretch",
+    width: 1,
+    marginRight: theme.space.x1,
+    marginLeft: theme.space.x1,
+    background: theme.colors.grey,
+    [`@media (max-width: ${breakpoint}px)`]: {
+        display: "none",
+    },
+}));
+const SummaryDivider = (props) => {
+    const { breakpoint } = useSummaryContext();
+    return React.createElement(Divider, Object.assign({ breakpoint: numberFromDimension(breakpoint) }, props));
+};
+export default SummaryDivider;

package/dist/src/Summary/SummaryItem.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { FlexProps } from "../Flex/Flex";
-type SummaryItemProps = Omit<FlexProps, "as"> & {
-    value: number | string;
-    status: React.ReactNode;
-};
-declare const SummaryItem: React.FC<React.PropsWithChildren<SummaryItemProps>>;
-export default SummaryItem;
+import React from "react";
+import { FlexProps } from "../Flex/Flex";
+type SummaryItemProps = Omit<FlexProps, "as"> & {
+    value: number | string;
+    status: React.ReactNode;
+};
+declare const SummaryItem: React.FC<React.PropsWithChildren<SummaryItemProps>>;
+export default SummaryItem;

package/dist/src/Summary/SummaryItem.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { Flex } from "../Flex";
+import { Text } from "../Type";
+import useMediaQuery from "../hooks/useMediaQuery";
+import { useSummaryContext } from "./SummaryContext";
+const SummaryItemWrapper = styled(Flex)(({ theme, breakpoint }) => ({
+    gap: theme.space.half,
+    flexDirection: "column",
+    [`@media (max-width: ${breakpoint}px)`]: {
+        flexDirection: "row",
+    },
+}));
+const SummaryItem = (_a) => {
+    var { value, status } = _a, rest = __rest(_a, ["value", "status"]);
+    const { breakpoint } = useSummaryContext();
+    const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
+    delete rest["children"];
+    return (React.createElement(SummaryItemWrapper, Object.assign({ breakpoint: breakpoint }, rest),
+        React.createElement(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined }, value),
+        status));
+};
+export default SummaryItem;

package/dist/src/Summary/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Summary } from "./Summary";
-export { default as SummaryItem } from "./SummaryItem";
-export { default as SummaryDivider } from "./SummaryDivider";
+export { default as Summary } from "./Summary";
+export { default as SummaryItem } from "./SummaryItem";
+export { default as SummaryDivider } from "./SummaryDivider";

package/dist/src/Summary/index.js

@@ -0,0 +1,3 @@
+export { default as Summary } from "./Summary";
+export { default as SummaryItem } from "./SummaryItem";
+export { default as SummaryDivider } from "./SummaryDivider";

package/dist/src/Switcher/Switch.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export type SwitchProps = Omit<React.ComponentPropsWithRef<"button">, "value"> & {
-    value?: string;
-    selected?: boolean;
-    variant?: ComponentVariant;
-};
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default Switch;
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export type SwitchProps = Omit<React.ComponentPropsWithRef<"button">, "value"> & {
+    value?: string;
+    selected?: boolean;
+    variant?: ComponentVariant;
+};
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/src/Switcher/Switch.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+import numberFromDimension from "../utils/numberFromDimension";
+const Switch = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React.createElement(SwitchButton, Object.assign({}, rest, { ref: ref }), children));
+});
+const SwitchButton = styled.button(({ selected, theme }) => (Object.assign(Object.assign(Object.assign({ margin: 1, background: selected ? theme.colors.white : "none", color: selected ? theme.colors.darkBlue : theme.colors.darkGrey, cursor: "pointer", border: "none", borderRadius: theme.radii.rounded, fontSize: theme.fontSizes.base, fontWeight: theme.fontWeights.medium, lineHeight: theme.lineHeights.base, textDecoration: "none", whiteSpace: "nowrap", padding: `${numberFromDimension(theme.space.half) - 1}px ${theme.space.x2}` }, (selected && { boxShadow: theme.shadows.small })), { "&:focus": {
+        outline: "none",
+        boxShadow: theme.shadows.focus,
+    } }), (!selected && {
+    "&:hover": {
+        backgroundColor: theme.colors.lightGrey,
+    },
+}))), variant({
+    variants: {
+        touch: {
+            fontSize: "md",
+            lineHeight: "base",
+        },
+    },
+}));
+export default Switch;

package/dist/src/Switcher/Switcher.d.ts

@@ -1,11 +1,11 @@
-import React, { ReactElement } from "react";
-import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import type { SwitchProps } from "./Switch";
-type SwitcherProps = {
-    variant?: ComponentVariant;
-    children?: ReactElement<SwitchProps>[];
-    selected?: string;
-    onChange?: (value: string) => void;
-};
-declare const Switcher: React.FC<React.PropsWithChildren<SwitcherProps>>;
-export default Switcher;
+import React, { ReactElement } from "react";
+import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import type { SwitchProps } from "./Switch";
+type SwitcherProps = {
+    variant?: ComponentVariant;
+    children?: ReactElement<SwitchProps>[];
+    selected?: string;
+    onChange?: (value: string) => void;
+};
+declare const Switcher: React.FC<React.PropsWithChildren<SwitcherProps>>;
+export default Switcher;

package/dist/src/Switcher/Switcher.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box } from "../Box";
+import FocusManager from "../utils/ts/FocusManager";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+const Switcher = (_a) => {
+    var { variant, selected, onChange } = _a, rest = __rest(_a, ["variant", "selected", "onChange"]);
+    const componentVariant = useComponentVariant(variant);
+    const optionRefs = [];
+    const isSelected = (value, index) => {
+        if (!selected)
+            return index === 0;
+        return value === selected;
+    };
+    const getSelectedIndex = () => {
+        return React.Children.toArray(rest.children).findIndex((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value) === selected; });
+    };
+    const options = (focusedIndex, setFocusedIndex, handleArrowNavigation) => {
+        return React.Children.map(rest.children, (child, index) => {
+            return React.cloneElement(child, {
+                variant: componentVariant,
+                tabIndex: index === focusedIndex ? 0 : -1,
+                selected: isSelected(child.props.value, index),
+                "aria-selected": isSelected(child.props.value, index),
+                onKeyDown: handleArrowNavigation,
+                ref: (ref) => {
+                    optionRefs[index] = ref;
+                },
+                onFocus: (e) => {
+                    e.stopPropagation();
+                },
+                onClick: (e) => {
+                    setFocusedIndex(index);
+                    if (onChange)
+                        onChange(e.target.value);
+                },
+            });
+        });
+    };
+    return (React.createElement(Box, Object.assign({ display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px" }, rest),
+        React.createElement(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation))));
+};
+export default Switcher;

package/dist/src/Switcher/Switcher.story.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-export declare const WithSelectedValue: () => React.JSX.Element;
-export declare const WithOtherInteractiveElements: () => React.JSX.Element;
-export declare const WithContent: () => React.JSX.Element;
-declare const _default: {
-    title: string;
-};
-export default _default;
+import React from "react";
+export declare const WithSelectedValue: () => React.JSX.Element;
+export declare const WithOtherInteractiveElements: () => React.JSX.Element;
+export declare const WithContent: () => React.JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

package/dist/src/Switcher/Switcher.story.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Box } from "../Box";
+import { Text } from "../Type";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import Switcher from "./Switcher";
+import Switch from "./Switch";
+export const WithSelectedValue = () => {
+    const [selected, setSelected] = useState("option_2");
+    return (React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected },
+        React.createElement(Switch, { value: "option_1" }, "Option 1"),
+        React.createElement(Switch, { value: "option_2" }, "Option 2")));
+};
+export const WithOtherInteractiveElements = () => (React.createElement(Flex, { gap: "x1", alignItems: "center" },
+    React.createElement(Button, null, "Click me"),
+    React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: "option_2" },
+        React.createElement(Switch, { value: "option_1" }, "Option 1"),
+        React.createElement(Switch, { value: "option_2" }, "Option 2"))));
+export const WithContent = () => {
+    const [selected, setSelected] = useState("all");
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected },
+            React.createElement(Switch, { value: "all" }, "All"),
+            React.createElement(Switch, { value: "option_1" }, "Option 1"),
+            React.createElement(Switch, { value: "option_2" }, "Option 2")),
+        React.createElement(Box, { px: "x1", py: "x3" },
+            ["all", "option_1"].includes(selected) && React.createElement(Text, null, "Option 1 Content"),
+            ["all", "option_2"].includes(selected) && React.createElement(Text, null, "Option 2 Content"))));
+};
+export default {
+    title: "Components/Switcher",
+};

package/dist/src/Switcher/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Switcher } from "./Switcher";
-export { default as Switch } from "./Switch";
+export { default as Switcher } from "./Switcher";
+export { default as Switch } from "./Switch";

package/dist/src/Switcher/index.js

@@ -0,0 +1,2 @@
+export { default as Switcher } from "./Switcher";
+export { default as Switch } from "./Switch";

package/dist/src/Table/BaseTable.d.ts

@@ -1,22 +1,22 @@
-import React from "react";
-import { RowType, Columns, RowBorder } from "./Table.types";
-export type BaseTableProps<ColumnMetaData> = {
-    columns: Columns<ColumnMetaData>;
-    rows: RowType[];
-    noRowsContent?: string;
-    keyField?: string;
-    id?: string;
-    loading?: boolean;
-    footerRows?: any;
-    rowHovers?: boolean;
-    compact?: boolean;
-    className?: string;
-    stickyHeader?: boolean;
-    onRowMouseEnter?: (...args: any[]) => any;
-    onRowMouseLeave?: (...args: any[]) => any;
-    onMouseEnter?: any;
-    onMouseLeave?: any;
-    rowBorder?: RowBorder;
-};
-declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, rowBorder, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
-export default BaseTable;
+import React from "react";
+import { RowType, Columns, RowBorder } from "./Table.types";
+export type BaseTableProps<ColumnMetaData> = {
+    columns: Columns<ColumnMetaData>;
+    rows: RowType[];
+    noRowsContent?: string;
+    keyField?: string;
+    id?: string;
+    loading?: boolean;
+    footerRows?: any;
+    rowHovers?: boolean;
+    compact?: boolean;
+    className?: string;
+    stickyHeader?: boolean;
+    onRowMouseEnter?: (...args: any[]) => any;
+    onRowMouseLeave?: (...args: any[]) => any;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    rowBorder?: RowBorder;
+};
+declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, rowBorder, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
+export default BaseTable;

package/dist/src/Table/BaseTable.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { space } from "styled-system";
+import TableHead from "./TableHead";
+import TableBody from "./TableBody";
+import TableFoot from "./TableFoot";
+const StyledTable = styled.table(space, {
+    borderCollapse: "collapse",
+    width: "100%",
+    background: "white",
+    position: "relative",
+});
+function BaseTable(_a) {
+    var { noRowsContent = "No records have been created for this table.", keyField = "id", loading = false, footerRows = [], rowHovers = true, compact = false, stickyHeader = false, onRowMouseEnter = () => { }, onRowMouseLeave = () => { }, columns, rows, id, className, rowBorder = false } = _a, props = __rest(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className", "rowBorder"]);
+    return (React.createElement(StyledTable, Object.assign({ id: id, className: className }, props),
+        React.createElement(TableHead, { columns: columns, compact: compact, sticky: stickyHeader }),
+        React.createElement(TableBody, { columns: columns, rows: rows, keyField: keyField, noRowsContent: noRowsContent, loading: loading, rowHovers: rowHovers, compact: compact, onRowMouseLeave: onRowMouseLeave, onRowMouseEnter: onRowMouseEnter, rowBorder: rowBorder }),
+        footerRows && (React.createElement(TableFoot, { columns: columns, rows: footerRows, keyField: keyField, loading: loading, compact: compact }))));
+}
+export default BaseTable;

package/dist/src/Table/SortingColumnHeader.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-interface SortingColumnHeaderProps {
-    onChange?: React.MouseEventHandler<HTMLButtonElement>;
-    ariaLabel?: string;
-    label?: string;
-    ascending?: boolean;
-    active?: boolean;
-}
-declare function SortingColumnHeader({ onChange, label, ariaLabel, ascending, active, }: SortingColumnHeaderProps): React.JSX.Element;
-export default SortingColumnHeader;
+import React from "react";
+interface SortingColumnHeaderProps {
+    onChange?: React.MouseEventHandler<HTMLButtonElement>;
+    ariaLabel?: string;
+    label?: string;
+    ascending?: boolean;
+    active?: boolean;
+}
+declare function SortingColumnHeader({ onChange, label, ariaLabel, ascending, active, }: SortingColumnHeaderProps): React.JSX.Element;
+export default SortingColumnHeader;

package/dist/src/Table/SortingColumnHeader.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "../Type";
+import { Flex } from "../Flex";
+import { ControlIcon } from "../Button";
+function SortingColumnHeader({ onChange, label, ariaLabel, ascending = false, active = false, }) {
+    const { t } = useTranslation();
+    const defaultAriaLabel = ascending ? t("sort descending") : t("sort ascending");
+    return (React.createElement(Flex, { alignItems: "center" },
+        React.createElement(Text, { mr: "x1" }, label),
+        React.createElement(ControlIcon, { size: "x3", icon: ascending ? "sortDown" : "sortUp", label: ariaLabel || defaultAriaLabel, toggled: active, onClick: onChange })));
+}
+export default SortingColumnHeader;