@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/ButtonGroup/index.js

@@ -0,0 +1,128 @@
+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 '@emotion/styled';
+import { css } from '@emotion/react';
+import ButtonGroupContext from './ButtonGroupContext';
+import { CONTROL_BORDER } from '../ThemeProvider/tokens';
+/**
+ * The buttons are glued: the inner corners are square and the borders overlap by the width of the border.
+ * `:not(...)` raises the specificity above the own styles of the button.
+ * `-of-type`, not `-child`: with SSR emotion inserts <style> elements between the children
+ */
+const StyledGroup = styled.div `
+  display: ${({ $fullWidth }) => ($fullWidth ? 'flex' : 'inline-flex')};
+  flex-direction: ${({ $orientation }) => ($orientation === 'vertical' ? 'column' : 'row')};
+  vertical-align: middle;
+
+  & > * {
+    position: relative;
+  }
+
+  & > *:hover,
+  & > [aria-pressed='true'] {
+    z-index: 1;
+  }
+
+  & > *:focus-visible {
+    z-index: 2;
+  }
+
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          & > *:not(:first-of-type) {
+            margin-top: calc(-1 * ${CONTROL_BORDER});
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
+          & > *:not(:last-of-type) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        `
+    : css `
+          & > *:not(:first-of-type) {
+            margin-left: calc(-1 * ${CONTROL_BORDER});
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+          & > *:not(:last-of-type) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        `}
+
+  ${({ $fullWidth, $orientation }) => $fullWidth &&
+    css `
+      & > * {
+        ${$orientation === 'vertical' ? 'width: 100%;' : 'flex: 1 1 0; justify-content: center;'}
+      }
+    `}
+`;
+const toArray = (value) => {
+    if (typeof value === 'undefined' || value === null) {
+        return [];
+    }
+    return typeof value === 'string' ? [value] : value;
+};
+const ButtonGroup = (props, ref) => {
+    const { children, multiple, value, defaultValue, onChange, variant = 'outlined', color, selectedColor = 'primary', disabled, orientation = 'horizontal', fullWidth = false, deselectable = false } = props, nativeProps = __rest(props, ["children", "multiple", "value", "defaultValue", "onChange", "variant", "color", "selectedColor", "disabled", "orientation", "fullWidth", "deselectable"]);
+    const selectable = typeof value !== 'undefined' ||
+        typeof defaultValue !== 'undefined' ||
+        typeof onChange !== 'undefined';
+    const isControlled = typeof value !== 'undefined';
+    const [internalValue, setInternalValue] = React.useState(() => toArray(defaultValue));
+    const selected = isControlled ? toArray(value) : internalValue;
+    // The latest values for the toggle callback, so the context value does not change on every render
+    const latest = React.useRef({ selected, multiple, deselectable, isControlled, onChange });
+    latest.current = { selected, multiple, deselectable, isControlled, onChange };
+    const toggle = React.useCallback((buttonValue) => {
+        var _a;
+        const { selected, multiple, deselectable, isControlled, onChange } = latest.current;
+        const isSelected = selected.includes(buttonValue);
+        let next;
+        if (multiple) {
+            next = isSelected
+                ? selected.filter(item => item !== buttonValue)
+                : [...selected, buttonValue];
+        }
+        else {
+            if (isSelected && !deselectable) {
+                return;
+            }
+            next = isSelected ? [] : [buttonValue];
+        }
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        if (multiple) {
+            onChange === null || onChange === void 0 ? void 0 : onChange([...next]);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange((_a = next[0]) !== null && _a !== void 0 ? _a : null);
+        }
+    }, []);
+    const selectedKey = selected.join('\u0000');
+    const contextValue = React.useMemo(() => ({
+        variant,
+        color,
+        selectedColor,
+        disabled,
+        orientation,
+        selectable,
+        isSelected: buttonValue => selectedKey !== '' && selectedKey.split('\u0000').includes(buttonValue),
+        toggle,
+    }), [variant, color, selectedColor, disabled, orientation, selectable, selectedKey, toggle]);
+    return (React.createElement(ButtonGroupContext.Provider, { value: contextValue },
+        React.createElement(StyledGroup, Object.assign({ role: "group" }, nativeProps, { "$orientation": orientation, "$fullWidth": fullWidth, ref: ref }), children)));
+};
+export default React.forwardRef(ButtonGroup);

package/esm/Calendar/CalendarBody.js

@@ -0,0 +1,25 @@
+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 '@emotion/styled';
+const StyledCalendarBody = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 15em;
+`;
+const CalendarBody = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledCalendarBody, Object.assign({}, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarBody);

package/esm/Calendar/CalendarCell.js

@@ -0,0 +1,62 @@
+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 '@emotion/styled';
+import Button from '../Button';
+import { css } from '@emotion/react';
+const Btn = styled(Button) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  padding: 1em;
+  margin: 0;
+  min-width: 0;
+  position: relative;
+  color: ${({ theme, $isSelected, disabled }) => {
+    switch (true) {
+        case $isSelected:
+            return theme.color.accentPrimaryContrast.toString();
+        // The days out of minDate/maxDate are dimmed
+        case disabled:
+            return theme.color.textPrimary.alpha(0.3).toString();
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  ${({ $fill, theme, $isSelected }) => $fill &&
+    !$isSelected &&
+    css `
+      background-color: transparent;
+      position: relative;
+      color: ${theme.color.accentPrimaryContrast.toString()};
+      &:before {
+        position: absolute;
+        border-radius: ${theme.shape.radiusFactor * 0.8}em;
+        inset: 0.6em;
+        content: '';
+        background-color: ${theme.color.accentPrimary.alpha(0.9).toString()};
+      }
+      & > span {
+        position: relative;
+        color: ${theme.color.accentPrimaryContrast.toString()};
+      }
+    `};
+`;
+const CalendarCell = (props, ref) => {
+    const { isToday, children, isSelected, isDisabled, accentColor, fill } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled", "accentColor", "fill"]);
+    return (React.createElement(Btn, Object.assign({ iconOnly: true, type: "button", "$fill": fill, "$isSelected": isSelected, variant: isSelected ? 'standard' : isToday ? 'outlined' : 'plain', color: isSelected || isToday ? accentColor : 'default', tabIndex: isDisabled ? -1 : restProps.tabIndex, disabled: isDisabled }, restProps, { ref: ref }), children));
+};
+export default React.forwardRef(CalendarCell);