draft-components 1.6.0 → 1.7.1

package/cjs/components/index.cjs

@@ -24,6 +24,9 @@ const emptyState = require('./empty-state/empty-state.cjs');
 const filePicker = require('./file-picker/file-picker.cjs');
 const filterButtons = require('./filter-buttons/filter-buttons.cjs');
 const filterButton = require('./filter-buttons/filter-button.cjs');
+const stringFilter = require('./filtered-search/model/string-filter.cjs');
+const stringSetFilter = require('./filtered-search/model/string-set-filter.cjs');
+const filteredSearch = require('./filtered-search/filtered-search.cjs');
 const formField = require('./form-field/form-field.cjs');
 const label = require('./label/label.cjs');
 const menu = require('./menu/menu.cjs');
@@ -40,6 +43,9 @@ const radio = require('./radio/radio.cjs');
 const segmentedControl = require('./segmented-control/segmented-control.cjs');
 const select = require('./select/select.cjs');
 const selectionControl = require('./selection-control/selection-control.cjs');
+const slideOver = require('./slide-over/slide-over.cjs');
+const slideOverHeader = require('./slide-over/slide-over-header.cjs');
+const slideOverBody = require('./slide-over/slide-over-body.cjs');
 const slider = require('./slider/slider.cjs');
 const sliderTickMarks = require('./slider/slider-tick-marks.cjs');
 const spinner = require('./spinner/spinner.cjs');
@@ -89,6 +95,9 @@ exports.EmptyState = emptyState.EmptyState;
 exports.FilePicker = filePicker.FilePicker;
 exports.FilterButtons = filterButtons.FilterButtons;
 exports.FilterButton = filterButton.FilterButton;
+exports.StringFilter = stringFilter.StringFilter;
+exports.StringSetFilter = stringSetFilter.StringSetFilter;
+exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.FormField = formField.FormField;
 exports.Label = label.Label;
 exports.Menu = menu.Menu;
@@ -105,6 +114,9 @@ exports.Radio = radio.Radio;
 exports.SegmentedControl = segmentedControl.SegmentedControl;
 exports.Select = select.Select;
 exports.SelectionControl = selectionControl.SelectionControl;
+exports.SlideOver = slideOver.SlideOver;
+exports.SlideOverHeader = slideOverHeader.SlideOverHeader;
+exports.SlideOverBody = slideOverBody.SlideOverBody;
 exports.Slider = slider.Slider;
 exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
 exports.Spinner = spinner.Spinner;

package/cjs/components/popover/popover.cjs

@@ -9,14 +9,13 @@ const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
 const usePageClick = require('./use-page-click.cjs');
 const positioner = require('../positioner/positioner.cjs');
 
-const Popover = react.forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+const Popover = react.forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, transitionDurationMs = 100, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
     const [defaultIsOpen, setDefaultIsOpen] = react.useState(props.defaultIsOpen ?? false);
     const anchorRef = react.useRef(null);
     const contentRef = react.useRef(null);
     const isOpen = props.isOpen ?? defaultIsOpen;
-    const durationMs = 100;
     const { isMounted, className: transitionClass } = useMountTransition.useMountTransition({
-        durationMs,
+        durationMs: transitionDurationMs,
         isShown: isOpen,
         enterFrom: 'dc-popover_closed',
         enterTo: 'dc-popover_opened',
@@ -86,7 +85,7 @@ const Popover = react.forwardRef(function Popover({ shouldTrapFocus = true, shou
             delete props.defaultIsOpen;
             delete props.isOpen;
             return (jsxRuntime.jsx("div", { ref: portalRef, style: {
-                    '--dc-popover-transition-duration': `${durationMs}ms`,
+                    '--dc-popover-transition-duration': `${transitionDurationMs}ms`,
                     ...portalStyle,
                 }, className: reactHelpers.classNames('dc-popover', transitionClass), children: jsxRuntime.jsx("div", { ...props, ref: contentRef, className: reactHelpers.classNames('dc-popover-modal', className), children: children }) }));
         }

package/cjs/components/slide-over/slide-over-body.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function SlideOverBody({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { className: reactHelpers.classNames('dc-slide-over-body', className), ...props }));
+}
+
+exports.SlideOverBody = SlideOverBody;

package/cjs/components/slide-over/slide-over-context.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+
+const Context = react.createContext(null);
+function useSlideOverContext() {
+    const ctx = react.useContext(Context);
+    if (!ctx) {
+        throw new Error('useSlideOverContext must be used within SlideOverContextProvider');
+    }
+    return ctx;
+}
+function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }) {
+    const ctx = react.useMemo(() => ({
+        titleId,
+        descriptionId,
+        closePanel,
+    }), [titleId, descriptionId, closePanel]);
+    return (jsxRuntime.jsx(Context.Provider, { value: ctx, children: children }));
+}
+
+exports.SlideOverContextProvider = SlideOverContextProvider;
+exports.useSlideOverContext = useSlideOverContext;

package/cjs/components/slide-over/slide-over-header.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+require('../button/button.cjs');
+const iconButton = require('../button/icon-button.cjs');
+const slideOverContext = require('./slide-over-context.cjs');
+
+function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
+    const { titleId, descriptionId, closePanel } = slideOverContext.useSlideOverContext();
+    const onCloseButtonClicked = (ev) => {
+        closePanel('close-button');
+        onClickCloseButton?.(ev);
+    };
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [jsxRuntime.jsxs("div", { className: "dc-slide-over-header__title", children: [jsxRuntime.jsx("h2", { id: titleId, children: title }), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(XMarkIcon, {}), "aria-label": closeButtonAccessibleName, variant: "tinted", size: "xs", onClick: onCloseButtonClicked })] }), description ? (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null] }));
+}
+function XMarkIcon(props) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 20, height: 20, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+
+exports.SlideOverHeader = SlideOverHeader;

package/cjs/components/slide-over/slide-over.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const slideOverContext = require('./slide-over-context.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const useDisableBodyScroll = require('../../hooks/use-disable-body-scroll.cjs');
+const useEscKeyDown = require('../../hooks/use-esc-key-down.cjs');
+const useFocusTrap = require('../../hooks/use-focus-trap.cjs');
+const portal = require('../portal/portal.cjs');
+const slideOverHeader = require('./slide-over-header.cjs');
+const slideOverBody = require('./slide-over-body.cjs');
+
+const panelSlideIn = [
+    { transform: 'translateX(100%)' },
+    { transform: 'translateX(0%)' },
+];
+const backdropFade = [
+    { opacity: 0 },
+    { opacity: 1 },
+];
+function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs = 350, animationDisabled = false, className, children, onClose, ...props }) {
+    const id = react.useId();
+    const titleId = ariaLabelledby || `${id}dialogTitle`;
+    const descriptionId = ariaDescribedby || `${id}dialogDescription`;
+    const backdropRef = react.useRef(null);
+    const panelRef = react.useRef(null);
+    const isAnimationDisabled = react.useRef(animationDisabled);
+    const shouldPlayAnimations = react.useCallback(() => {
+        const mediaQueryList = window.matchMedia('(prefers-reduced-motion)');
+        return !isAnimationDisabled.current && !mediaQueryList.matches;
+    }, []);
+    const closePanel = react.useMemo(() => {
+        let isClosing = false;
+        return (source) => {
+            if (isClosing) {
+                return;
+            }
+            if (!shouldPlayAnimations()) {
+                onClose(source);
+            }
+            isClosing = true;
+            const backdrop = reactHelpers.getRefElement(backdropRef);
+            const backdropAnimations = backdrop.getAnimations();
+            if (backdropAnimations.length === 0) {
+                backdropAnimations.push(backdrop.animate(backdropFade, {
+                    direction: 'reverse',
+                    fill: 'both',
+                    easing: 'ease-in-out',
+                    duration: animationDurationMs,
+                }));
+            }
+            else {
+                backdropAnimations.forEach((animation) => animation.reverse());
+            }
+            const panel = reactHelpers.getRefElement(panelRef);
+            const panelAnimations = panel.getAnimations();
+            if (panelAnimations.length === 0) {
+                backdropAnimations.push(panel.animate(panelSlideIn, {
+                    direction: 'reverse',
+                    fill: 'both',
+                    easing: 'ease-in-out',
+                    duration: animationDurationMs,
+                }));
+            }
+            else {
+                panelAnimations.forEach((animation) => animation.reverse());
+            }
+            const animations = [...backdropAnimations, ...panelAnimations];
+            Promise.all(animations.map((animation) => animation.finished)).then(() => {
+                onClose(source);
+                isClosing = false;
+            });
+        };
+    }, [animationDurationMs, onClose, shouldPlayAnimations]);
+    react.useEffect(() => {
+        isAnimationDisabled.current = animationDisabled;
+    }, [animationDisabled]);
+    react.useEffect(() => {
+        if (shouldPlayAnimations()) {
+            const backdrop = reactHelpers.getRefElement(backdropRef);
+            backdrop.animate(backdropFade, {
+                fill: 'both',
+                easing: 'ease-in-out',
+                duration: animationDurationMs,
+            });
+            const panel = reactHelpers.getRefElement(panelRef);
+            panel.animate(panelSlideIn, {
+                fill: 'both',
+                easing: 'ease-in-out',
+                duration: animationDurationMs,
+            });
+        }
+    }, [shouldPlayAnimations, animationDurationMs]);
+    useEscKeyDown.useEscKeyDown(() => closePanel('escape'));
+    useFocusTrap.useFocusTrap(panelRef);
+    useDisableBodyScroll.useDisableBodyScroll();
+    const onClickBackdrop = () => {
+        closePanel('backdrop');
+    };
+    return (jsxRuntime.jsx(portal.Portal, { children: jsxRuntime.jsxs("div", { className: "dc-slide-over", children: [jsxRuntime.jsx("div", { "data-testid": "slide-over-backdrop", className: "dc-slide-over__backdrop", ref: backdropRef, onClick: onClickBackdrop }), jsxRuntime.jsx("div", { ...props, className: reactHelpers.classNames('dc-slide-over__panel', className), role: "dialog", ref: panelRef, "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, children: jsxRuntime.jsx(slideOverContext.SlideOverContextProvider, { titleId: titleId, descriptionId: descriptionId, closePanel: closePanel, children: children }) })] }) }));
+}
+SlideOver.Header = slideOverHeader.SlideOverHeader;
+SlideOver.Body = slideOverBody.SlideOverBody;
+
+exports.SlideOver = SlideOver;

package/cjs/hooks/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-const useMountTransition = require('./use-mount-transition.cjs');
 const useDisableBodyScroll = require('./use-disable-body-scroll.cjs');
 const useEscKeyDown = require('./use-esc-key-down.cjs');
 const useFocusTrap = require('./use-focus-trap.cjs');
+const useMountTransition = require('./use-mount-transition.cjs');
 
 
 
-exports.useMountTransition = useMountTransition.useMountTransition;
 exports.useDisableBodyScroll = useDisableBodyScroll.useDisableBodyScroll;
 exports.useEscKeyDown = useEscKeyDown.useEscKeyDown;
 exports.useFocusTrap = useFocusTrap.useFocusTrap;
+exports.useMountTransition = useMountTransition.useMountTransition;

package/cjs/hooks/use-disable-body-scroll.cjs

@@ -3,7 +3,9 @@
 const react = require('react');
 const helpers = require('../lib/helpers.cjs');
 
-function useDisableBodyScroll(options) {
+function useDisableBodyScroll(options = {
+    isEnabled: true,
+}) {
     react.useEffect(() => {
         if (options.isEnabled) {
             return disableBodyScroll();

package/cjs/hooks/use-esc-key-down.cjs

@@ -15,7 +15,9 @@ const handlers = [];
  * @param options.isEnabled A flag that determines whether to run
  * the passed handler or not.
  */
-function useEscKeyDown(handler, options) {
+function useEscKeyDown(handler, options = {
+    isEnabled: true,
+}) {
     const handlerRef = react.useRef(handler);
     const isEnabled = options.isEnabled;
     react.useEffect(() => {

package/cjs/hooks/use-focus-trap.cjs

@@ -26,7 +26,9 @@ const focusableElementsSelector = [
  * @param {boolean} options.isEnabled - A flag that determines whether
  * to trap focus or not.
  */
-function useFocusTrap(modalRef, options) {
+function useFocusTrap(modalRef, options = {
+    isEnabled: true,
+}) {
     const isEnabled = options.isEnabled;
     react.useEffect(() => {
         if (!isEnabled) {

package/cjs/index.cjs

@@ -3,10 +3,10 @@
 const keyboardKeys = require('./lib/keyboard-keys.cjs');
 const helpers = require('./lib/helpers.cjs');
 const reactHelpers = require('./lib/react-helpers.cjs');
-const useMountTransition = require('./hooks/use-mount-transition.cjs');
 const useDisableBodyScroll = require('./hooks/use-disable-body-scroll.cjs');
 const useEscKeyDown = require('./hooks/use-esc-key-down.cjs');
 const useFocusTrap = require('./hooks/use-focus-trap.cjs');
+const useMountTransition = require('./hooks/use-mount-transition.cjs');
 const alert = require('./components/alert/alert.cjs');
 const avatar = require('./components/avatar/avatar.cjs');
 const avatarGroup = require('./components/avatar-group/avatar-group.cjs');
@@ -31,6 +31,9 @@ const emptyState = require('./components/empty-state/empty-state.cjs');
 const filePicker = require('./components/file-picker/file-picker.cjs');
 const filterButtons = require('./components/filter-buttons/filter-buttons.cjs');
 const filterButton = require('./components/filter-buttons/filter-button.cjs');
+const stringFilter = require('./components/filtered-search/model/string-filter.cjs');
+const stringSetFilter = require('./components/filtered-search/model/string-set-filter.cjs');
+const filteredSearch = require('./components/filtered-search/filtered-search.cjs');
 const formField = require('./components/form-field/form-field.cjs');
 const label = require('./components/label/label.cjs');
 const menu = require('./components/menu/menu.cjs');
@@ -47,6 +50,9 @@ const radio = require('./components/radio/radio.cjs');
 const segmentedControl = require('./components/segmented-control/segmented-control.cjs');
 const select = require('./components/select/select.cjs');
 const selectionControl = require('./components/selection-control/selection-control.cjs');
+const slideOver = require('./components/slide-over/slide-over.cjs');
+const slideOverHeader = require('./components/slide-over/slide-over-header.cjs');
+const slideOverBody = require('./components/slide-over/slide-over-body.cjs');
 const slider = require('./components/slider/slider.cjs');
 const sliderTickMarks = require('./components/slider/slider-tick-marks.cjs');
 const spinner = require('./components/spinner/spinner.cjs');
@@ -74,15 +80,17 @@ const tooltip = require('./components/tooltip/tooltip.cjs');
 
 exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
 exports.assertIfNullable = helpers.assertIfNullable;
+exports.exhaustiveCheck = helpers.exhaustiveCheck;
 exports.once = helpers.once;
 exports.classNames = reactHelpers.classNames;
 exports.focusElement = reactHelpers.focusElement;
+exports.getRefElement = reactHelpers.getRefElement;
 exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
 exports.mergeRefs = reactHelpers.mergeRefs;
-exports.useMountTransition = useMountTransition.useMountTransition;
 exports.useDisableBodyScroll = useDisableBodyScroll.useDisableBodyScroll;
 exports.useEscKeyDown = useEscKeyDown.useEscKeyDown;
 exports.useFocusTrap = useFocusTrap.useFocusTrap;
+exports.useMountTransition = useMountTransition.useMountTransition;
 exports.Alert = alert.Alert;
 exports.Avatar = avatar.Avatar;
 exports.AvatarGroup = avatarGroup.AvatarGroup;
@@ -107,6 +115,9 @@ exports.EmptyState = emptyState.EmptyState;
 exports.FilePicker = filePicker.FilePicker;
 exports.FilterButtons = filterButtons.FilterButtons;
 exports.FilterButton = filterButton.FilterButton;
+exports.StringFilter = stringFilter.StringFilter;
+exports.StringSetFilter = stringSetFilter.StringSetFilter;
+exports.FilteredSearch = filteredSearch.FilteredSearch;
 exports.FormField = formField.FormField;
 exports.Label = label.Label;
 exports.Menu = menu.Menu;
@@ -123,6 +134,9 @@ exports.Radio = radio.Radio;
 exports.SegmentedControl = segmentedControl.SegmentedControl;
 exports.Select = select.Select;
 exports.SelectionControl = selectionControl.SelectionControl;
+exports.SlideOver = slideOver.SlideOver;
+exports.SlideOverHeader = slideOverHeader.SlideOverHeader;
+exports.SlideOverBody = slideOverBody.SlideOverBody;
 exports.Slider = slider.Slider;
 exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
 exports.Spinner = spinner.Spinner;

package/cjs/lib/helpers.cjs

@@ -11,11 +11,15 @@ function once(fn) {
         return result;
     };
 }
-function assertIfNullable(value, message = 'value is null or undefined') {
+function exhaustiveCheck(value, message) {
+    throw new Error(message);
+}
+function assertIfNullable(value, message = 'assertIfNullable: value is null or undefined.') {
     if (value == null) {
         throw Error(message);
     }
 }
 
 exports.assertIfNullable = assertIfNullable;
+exports.exhaustiveCheck = exhaustiveCheck;
 exports.once = once;

package/cjs/lib/index.cjs

@@ -8,8 +8,10 @@ const reactHelpers = require('./react-helpers.cjs');
 
 exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
 exports.assertIfNullable = helpers.assertIfNullable;
+exports.exhaustiveCheck = helpers.exhaustiveCheck;
 exports.once = helpers.once;
 exports.classNames = reactHelpers.classNames;
 exports.focusElement = reactHelpers.focusElement;
+exports.getRefElement = reactHelpers.getRefElement;
 exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
 exports.mergeRefs = reactHelpers.mergeRefs;

package/cjs/lib/keyboard-keys.cjs

@@ -12,6 +12,7 @@ const KeyboardKeys = {
     PageDown: 'PageDown',
     Enter: 'Enter',
     Escape: 'Escape',
+    Backspace: 'Backspace',
     Space: ' ',
 };
 

package/cjs/lib/react-helpers.cjs

@@ -43,8 +43,16 @@ function focusElement(element) {
         element.focus();
     }
 }
+function getRefElement(ref, message = 'getElementFromRef: ref value is null.') {
+    const value = ref.current;
+    if (value == null) {
+        throw new Error(message);
+    }
+    return value;
+}
 
 exports.classNames = classNames;
 exports.focusElement = focusElement;
+exports.getRefElement = getRefElement;
 exports.isReactElementWithRef = isReactElementWithRef;
 exports.mergeRefs = mergeRefs;